Question

我在Grid中有一个编辑器comboBox，它只在我点击行时显示。如何让它在网格中永久可见？感谢

Answer 1

如何让它在网格中永久可见？

如果您使用的是ExtJS版本5.x或更高版本，则可以使用widgetcolumn

窗口小部件列配置了窗口小部件配置对象，该对象指定xtype以指示此列的单元格中属于哪种类型的窗口小部件或组件。

我创建了一个sencha fiddle演示希望这可以帮助您解决问题或达到您的要求。

Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone', {
            name: 'checked',
            defaultValue: 'AL'
        }],
        data: [{
            name: 'Lisa',
            email: 'lisa@simpsons.com',
            phone: '555-111-1224'
        }, {
            name: 'Bart',
            email: 'bart@simpsons.com',
            phone: '555-222-1234'
        }, {
            name: 'Homer',
            email: 'homer@simpsons.com',
            phone: '555-222-1244'
        }, {
            name: 'Marge',
            email: 'marge@simpsons.com',
            phone: '555-222-1254'
        }]
    }),
    states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data: [{
            "abbr": "AL",
            "name": "Alabama"
        }, {
            "abbr": "AK",
            "name": "Alaska"
        }, {
            "abbr": "AZ",
            "name": "Arizona"
        }]
    });
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }, {
        text: 'State',
        width: 150,
        xtype: 'widgetcolumn',
        dataIndex: 'checked',
        widget: {
            xtype: 'combobox',
            flex: 1,
            emptyText: 'Select State',
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            store: states,
            listeners: {
                select: function (combo, record) {
                    Ext.Msg.alert('Success', 'Good you have selected <b>' + record.get('name') + '</b>')

                    var grid = combo.up('grid'),
                        index = grid.getView().indexOf(combo.el.up('table')),
                        record = grid.getStore().getAt(index);

                    console.log(record.getData());
                }
            }
        }
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

ComboBox在网格编辑器中保持可见

1 个答案: