使用forceSelection：true避免在焦点上将单元格重置为null

Question

我正在网格中尝试combobox forceSelection:true但是焦点上的单元格重置为null。任何人都可以帮助我，编写一个函数来保留焦点上的先前值。另外，如果我想将单元格值更新为null，我只想清除单元格值？可以做些什么？

希望快速回复。

Ext.application({
    name: 'Fiddle',

    launch: function () {
        run();
    }
});

function run() {
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['busname', 'time', 'typebus',],
        data: [{
            busname: 'ABCD',
            time: '15:30:00',
            typebus: 'AC Volvo',

        }, {
            busname: 'aaa',
            time: '13:30:00',
            typebus: 'Seater',

        },{
            busname: 'AAAA',
            time: '18:30:00',
            typebus: 'Sleeper',

        },{
            busname: 'ABCD',
            time: '19:30:00',
            typebus: 'AC Volvo',

        },]
    });

    Ext.create('Ext.grid.Panel', {
        xtype :'gridpanel',
        itemId:'busTimegrid',
        title: 'BUS DEATILS',
        mapperId:'getBusTime',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            header: 'Bus Name',
            dataIndex: 'busname',
            editor: 'textfield'
        }, {
            text: 'Bus Time',
                dataIndex: 'time',
            xtype: 'gridcolumn',
            renderer: function (value) {
                if (value instanceof Date)
                    return Ext.util.Format.date(value, 'H:i:s');
                else
                return value;
            },
            flex: 1,
            editor: {
                xtype: 'timefield',
                format: 'H:i:s',
                allowBlank: true,
                maskRe: /[0-9,:]/,
            }
        }, {
            header: 'Bus TYpe',
            dataIndex: 'typebus',
            editable:true,
            renderer: function (value) {
                if (Ext.isNumber(value)) {
                    var store = this.getEditor().getStore();
                    return store.findRecord('id', value).get('name');
                }
                return value;
            },
            editor: {
                xtype: 'combo',
                displayField: 'name',
                valueField: 'id',
                editable:true,
                forceSelection:true,
                store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    data: [{
                        id: 1,
                        name: 'AC Volvo'
                    }, {
                        id: 2,
                        name: 'Seater'
                    }, {
                        id: 3,
                        name: 'Sleeper'
                    }]
                })

            }
        }],
        selModel: 'cellmodel',
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1,
            plugins: ['emptiableCombo'],
                listConfig: {
                    cls: 'x-combo-boundlist-small'

                },
        },
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
    }
});
}

Fiddle

Answer 1

这是因为商店记录中的值与组合框valueField不匹配。单击要编辑的单元格时，它将从上下文中的记录中获取值，并尝试将其设置为单元格编辑器。您可以将valueField更改为'name'，甚至可以更好地使用列渲染器，如下所示：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        run();
    }
});

function run() {
    Ext.create('Ext.data.Store', {
        storeId: 'busTypeStore',
        fields: ['id', 'name'],
        data: [{
            id: 1,
            name: 'AC Volvo'
        }, {
            id: 2,
            name: 'Seater'
        }, {
            id: 3,
            name: 'Sleeper'
        }]
    });
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['busname', 'time', 'typebus',],
        data: [{
            busname: 'ABCD',
            time: '15:30:00',
            typebus: 1,

        }, {
            busname: 'aaa',
            time: '13:30:00',
            typebus: 2,

        },{
            busname: 'AAAA',
            time: '18:30:00',
            typebus: 3,

        },{
            busname: 'ABCD',
            time: '19:30:00',
            typebus: 1,

        },]
    });

    Ext.create('Ext.grid.Panel', {
        xtype :'gridpanel',
        itemId:'busTimegrid',
        pageSize:3,
        title: 'BUS DEATILS',
        mapperId:'getBusTime',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            header: 'Bus Name',
            dataIndex: 'busname',
            editor: 'textfield'
        }, {
            text: 'Bus Time',
                dataIndex: 'time',
            xtype: 'gridcolumn',
            renderer: function (value) {
                if (value instanceof Date)
                    return Ext.util.Format.date(value, 'H:i:s');
                else
                return value;
            },
            flex: 1,
            editor: {
                xtype: 'timefield',
                format: 'H:i:s',
                allowBlank: true,
                maskRe: /[0-9,:]/,
            }
        }, {
            header: 'Bus TYpe',
            dataIndex: 'typebus',
            editable:true,
            renderer: function (value) {
                var rec = Ext.data.StoreManager.lookup('busTypeStore').findRecord('id', value);
                return rec.get('name');
            },
            editor: {
                xtype: 'combo',
                displayField: 'name',
                valueField: 'id',
                editable:true,
                forceSelection:true,
                store: Ext.data.StoreManager.lookup('busTypeStore')

            }
        }],
        selModel: 'cellmodel',
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1,
            plugins: ['emptiableCombo'],
                listConfig: {
                    cls: 'x-combo-boundlist-small'

                },
        },
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
}