0

我正在尝试创建一个基本的测试应用程序，我在其中使用网格，进行行编辑并让用户从组合框中更改字段的值。一个非常常见的用例（至少对我来说）并且在 ExtJS 4.2 和更早版本中完成了很多次。然而，我试图用更少的代码，使用新的 ExtJS 5 数据绑定和关联来实现这一点。

我正在使用两种模型（人和语言），每个人都应该有一种首选语言。人只是 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 字段，但我想显示语言名称值，列渲染器仍然是最好的方法吗？

是否应该加载组合存储，或者我可以期望关联来处理这个问题（从样本中删除了其余代理）

组合存储应该链接到语言存储，还是作为字段关联的某种子存储？

我一直找不到任何完整的例子（结合 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 回答