03. Ext Designer で作成されるファイル

Ext Designer で作成されるファイル

Ext Designerで，画面上にいろいろ配置してプロジェクトを保存した後に，「Export Project」を実行するとソースファイルが生成されます。ファイルは，トップレベルのコンポーネントごとにhogehoge.jsというファイルとhogehoge.ui.jsという二つのファイルというようになります。

またデータストアの場合はもデータストアごとに一つのファイルができます。

そのほかに，

生成されたファイルの中で使うのは，上記の3つをのぞいたものとなるでしょう。

画面のデザインは開発途中でも何度も変更になると思われます。ですので，Ext Designer で生成されたソースを手メンテしないようにしなければなりません。画面デザイン以外の部分は，別のファイルに記述して，xds_includeOrder.txtにあるscript文に続いて読み込ませるということになると思います。

hogehoge.jsというファイルとhogehoge.ui.jsにわかれていたのは，これのためでした。最初にこの二つのファイルを生成してプロジェクトにインポートした後は，hogehoge.jsというファイルは変更してもよいのです。hogehoge.ui.jsは，UIに変更があるたびに再度インポートするわけです。オブジェクトにイベントハンドラを追加する場合などは，hogehoge.jsを修正して行います。

イベントハンドラの記述

ボタンが押されたときなどのイベントハンドラは，各種サンプルを見るとボタン生成の段階でオブジェクトリテラルに匿名関数を記述している例がほとんどですが，上記の理由でファイルを編集するわけにはいきませんから，別ファイルで追加することになります。上記の理由で，hogehoge.jsを編集して記述します。

このあたりのことは，ブログ記事に書きましたが，まちがいでした。

別件ですが，コンポーネントに値を設定する場合もgetCmpで得たオブジェクトに対してsetValueメソッドでセットします。

Ext.getCmp('btnTest').handler = function () {
        Ext.Msg.alert('test','test');
        Ext.getCmp('txtTest').setValue('aaaaa');
    }
    Ext.getCmp('txtTest').on('change', function () {
        Ext.Msg.alert('test','変更されたよ');
    });

Ext.getCmpというメソッドでコンポーネントのオブジェクトを参照できるんですね。これは実は，Ext.ComponentMgr.getの別名なんだそうです。

これも，どうも間違いに近いです。Ext.getCmpを使うことも可能なのですが，もっと簡単にできます。やっぱりちゃんと勉強しないといけませんね。hogehoge.jsのにイベントハンドラの定義を書きます。その際にはautoRefの設定がちゃんとされていれば，次のように書くことができます。

MyForm = Ext.extend(MyFormUi, {
    initComponent: function() {
        MyForm.superclass.initComponent.call(this);
        this.submitBtn.on('click', this.onSubmitBtnClick, this);
        this.cancelBtn.on('click', this.onCancelBtnClick, this);
    },
    onSubmitBtnClick: function() {
        // your implementation here!
    }
    onCancelBtnClick: function() {
        // your implementation here!
    }
});

非常にわかりやすいですよね。

データストア

データストアの場合はどうでしょうか。コンボボックスにセットするアイテムで，リストの内容が固定的なものなら，直接Designerのプロパティに設定することもできます。ArrayStoreを追加して，dataプロパティに配列のリテラルを書けばOKです。

べつな配列に入れておいて，それをセットする場合は，lodaDataメソッドを使いますが，その場合はデータストアを参照するために，Ext.StoreMgr.get を使います。

var myData = [
    [1, 'Office 2003'],
    [2, 'Office 2007'],
    [3, 'Office 2010']
];
Ext.StoreMgr.get('MyStore').loadData(myData);

こういう感じです。