extjs - フォームに複数のextjsコンボボックスをロードする

Question

別のComboBoxの質問。

私のテーブルには、外部キーである約10個のフィールドがあり、すべてコンボボックスで表示されます。サーバーに10回アクセスして各コンボのストアをロードせずに、このすべてのコンボをフォームに入力するにはどうすればよいですか？

Answer 1

それらはバックエンドで個別のテーブルとして保存されていますか? はいの場合、正しい方法は、それらをサーバーに 10 回別々にロードすることです。このシナリオは、次の方法で最適化できます。

• それらをすべて同時にロードする
• 事前にそのページに到達する前にそれらをすべてロードします

それでも、ExtJs アプリケーションには 10 個の異なるストアが必要です。

それらを 1 つのストアにまとめたい場合は、いくつかのことを覚えておいてください

• 異なるリストを区別できるように、この結合されたテーブルにフィールドを追加する必要があります。
• 一度にすべてをロードします
• そうしないと、異なるUIコンポーネント（コンボボックス）が異なるデータセットを表示できないため、それらを異なるストアオブジェクトに分離する必要があります。

Answer 2

よく知られている問題:)通常、私がこのような構造を持っている場合

var data = {
    ForeignKeyObjectId: 123,
    ForeignKeyObject: {
        Id: 123,
        SomeValue: 'Some text 1'
    },

    SomeOtherObjectId: 456,
    SomeOtherObject: {
        Id: 456,
        SomeValue: 'Some text 2'
    }
    //, ... same 8 times more
}

各コンボを手動でロードする必要があります。

var combo1 = this.down('#foreignKeyObjectCombo');
combo1.setValue(data.ForeignKeyObject.Id);
combo1.setRawValue(data.ForeignKeyObject.SomeValue);
combo1.store.loadData([data.ForeignKeyObject], true);

var combo2 = this.down('#someOtherObjectCombo');
combo2.setValue(data.SomeOtherObject.Id);
combo2.setRawValue(data.SomeOtherObject.SomeValue);
combo2.store.loadData([data.SomeOtherObject], true);

// same 8 times more

ExtJs 3に関する以前のプロジェクトの1つで、フォームとコンボボックスの動作をオーバーライドしてform.getForm().loadData(data)、この例のように手動で値（rawValue）を設定する代わりに一度使用できるようにしました。しかし、その方法は暗黙的だったので、私はこの方法がもっと好きです:)

Answer 3

例：

モデル1

Ext.create('Ext.data.Store', {
        model: 'EmployeeType',
        data : [
            {type: 1,    description: 'Administrative'},
            {type: 2,    description: 'Operative'},
        ]
    });

モデル 2

Ext.create('Ext.data.Store', {
    model: 'BloodType',
    data : [
        {type: 1,    description: 'A+'},
        {type: 2,    description: 'B+'},
    ]
});

ストアに Proxy がある場合でも、AutoLoad を無効にして、次のように 1 回のリクエストで必要なだけロードできるようにすることができます。

ストアを手動で作成します。

employeeType = Ext.create('Ext.data.Store', {model: EmployeeType});
bloodType = Ext.create('Ext.data.Store', {model: BloddType});

一度にすべてのコンボをもたらす Ajax リクエストを作成します。

Ext.ajax.request({
    url: './catalogs/getalldata',
    success: function(response) {
        var json = Ext.decode(response.responseText);
        employeeType.loadData(json.employeeTypes);
        bloodType.loadData(json.bloodTypes);
        //...
    } 
});