0

行を編集し、ユーザーがコンボ ボックスからフィールドの値を変更できるように、グリッドを使用する基本的なテスト アプリを作成しようとしています。非常に一般的な使用例 (少なくとも私にとって) であり、ExtJS 4.2 以前で何度も行われています。ただし、新しい ExtJS 5 のデータ バインディングと関連付けを使用して、より少ないコードでこれを実現しようとしています。

私は 2 つのモデル (Person と Language) を使用しており、各人は 1 つの優先言語を持つ必要があります。Person は単純に id, name, languageid であり、language は id,languagename です

Ext.define('MyApp.model.Person', {
    extend: 'Ext.data.Model',
    alias: 'model.person',

    fields: [
        {
            type: 'int',
            name: 'id'
        },
        {
            name: 'name'
        },
        {
            name: 'languageid',
            reference: 'MyApp.model.Language'
        }
    ]
});

Ext.define('MyApp.model.Language', {
    extend: 'Ext.data.Model',
    alias: 'model.language',

    fields: [
        {
            type: 'int',
            name: 'id'
        },
        {
            name: 'languagename'
        }
    ]
});

ViewModel:
Ext.define('MyApp.view.PersonsViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.persons',

    stores: {
        persons: {
            model: 'MyApp.model.Person',
            autoLoad:true
        },
        languages: {
            model: 'MyApp.model.Langugage',
            autoLoad:true
        }
    }

});

Grid (Part of larger View)
 {
            xtype: 'gridpanel',
            reference: 'grid',
            bind: {
                store: '{kamper}'
            },
            columns: [
                {
                    xtype: 'numbercolumn',
                    width: 35,
                    dataIndex: 'id',
                    text: 'Id'
                },
                {
                    xtype: 'gridcolumn',
                    width: 150,
                    dataIndex: 'langugageid',
                    text: 'Language',
                    editor: {
                        xtype: 'combobox',
                        lastQuery: '',
                        displayField: 'languagename',
                        valueField: 'id',
                        bind: {
                           selection: '{grid.selection.SomeRefToAssocStore.languagename}', /* 5.0.1 feature*/
                           value: '{grid.selection.profil}', /*should we even bind, since value is set from roweditor? */
                           store: '{languages}' /*directly to languages store or through grid store field association? */
                        }
                    }
                }
            ],
            listeners: {
                select: 'select'
            },
            features: [
                {
                    ftype: 'grouping',
                    groupHeaderTpl: [
                        'Avdeling: {name}'
                    ]
                }
            ],
            dockedItems: [
                {
                    xtype: 'pagingtoolbar',
                    dock: 'bottom',
                    width: 360,
                    displayInfo: true,
                    bind: {
                        store: '{kamper}'
                    }
                }
            ],
            plugins: [
                {
                    ptype: 'rowediting'
                }
            ]
        }

コードにいくつか質問がありますが、要約すると:

このような GUI をセットアップする最善の方法は何ですか?

コンボ ボックスのバインドはどのように設定すればよいですか?

列データ インデックスは id フィールドですが、languagename の値を表示したいのですが、列レンダラーは依然として最善の方法ですか?

コンボストアをロードする必要がありますか、または関連付けがこれを処理することを期待できますか (残りのプロキシはサンプルから削除されました)

コンボ ストアを言語ストアにリンクする必要がありますか、それともフィールド アソシエーションの何らかのサブストアとしてリンクする必要がありますか?

これの完全な例を見つけることができませんでした（rowedit、combo、およびbindingを組み合わせたもの）

「新しい」ベストプラクティスへの指針はありますか?

4

1 に答える 1

1

エディター列のレンダラーを設定する必要があります。このようなもの：

editor: {
    xtype: 'combobox',
    store: store,
    editable: false,
    valueField: 'id',
    displayField: 'name'
},
renderer: function(value) {
    var result = '';

    store.findBy(function(record) {
        if (record.getId() == value) {
            result = record.get('name');
        }
    });

    return result;
}

煎茶フィドルで表示

于 2014-08-15T05:25:15.827 に答える