Question

我正在尝试创建一个基本测试应用，其中我使用网格，行编辑并让用户从组合框更改字段的值。一个非常常见的用例（至少对我而言）并在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字段，但我想显示languagename值，列呈现器仍然是最好的方法吗？

是否应该加载组合商店，或者我是否希望关联处理此问题（从样本中删除其余代理）

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

我一直无法找到任何完整的例子（结合rowedit，combo和binding）

指向＆＃34; new＆＃34;最佳实践？

Answer 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;
}

Show on sencha fiddle

使用数据绑定在rowediting中使用combobox

1 个答案: