模型中的字段可以是组合框 - ExtJS 4

时间:2014-06-19 12:06:24

标签: extjs combobox extjs4 extjs4.2

我在ExtJS中定义了这种城市模型

Ext.define('Packt.model.staticData.City', {
    extend : 'Packt.model.sakila.Sakila',

    idProperty : 'city_id',

    fields : [{
        name : 'city_id'
    }, {
        name : 'city'
    }/*, { //doesn't work
        //name : 'country_id',
        xtype: 'combobox',
        store: Ext.getStore('countries'),
        fieldLabel: 'Choose Country',
        //queryMode: 'local',
        displayField: 'country',
        valueField: 'country_id',
    }*/],

    associations : [{
        type : 'belongsTo',
        model : 'Country',
        primaryKey : 'city_id',
        foreignKey : 'country_id'
    }]
});

是否可以在模型中创建组合框,类似上面评论中的代码?

我想在我的网格中创建行,而对于国家我想要在组合框中列出的国家/地区。 StaticData列表的每个菜单项都使用不同的数据/存储/模型加载相同的Ext.ux.LiveSearchGridPanel。

cities

当我点击添加按钮时,会发生以下情况:

onButtonClickAdd : function(button, e, options) {
        var grid = button.up('staticdatagrid'), 
            store = grid.getStore(), 
            modelName = store.getProxy().getModel().modelName, 
            cellEditing = grid.getPlugin('cellplugin');

        store.insert(0, Ext.create(modelName, {
            last_update : new Date()
        }));
        /*
        cellEditing.startEditByPostion({
            row : 0,
            column : 1
        });
        */
    },

1 个答案:

答案 0 :(得分:1)

  

没办法!!您可以使用编辑器插件在网格行中添加组合框。如下所示:

       cellEditing = new Ext.grid.plugin.CellEditing({
              clicksToEdit: 1
         });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            plugins: [cellEditing],
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Countries',
                dataIndex: 'country',
                editor: new Ext.form.field.ComboBox({
                    typeAhead: true,
                    selectOnTab: true,
                    store: countryStore,
                })
            })
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        })]