在可编辑网格中，如何使Ext组合框在选择项时立即完成编辑模式

In an editable grid, how to make an Ext combo box immediately finish edit mode when selecting an item?

本文关键字：编辑 模式 选择 组合 网格 Ext 何使      更新时间：2023-09-26

我已经配置了一个Ext JS 4网格，可以使用celllediting插件进行编辑。网格中的一些单元格有文本字段编辑器，一些单元格使用组合框编辑器。这一切都工作得很好，但我有一个小问题与组合框编辑器的默认行为。

基本上，当编辑具有组合框编辑器的单元格时，如果您使用鼠标从下拉菜单中选择一个项目，则该单元格的"编辑"模式不会完成。换句话说，单元格不会立即退出编辑模式并被标记为脏。相反，它会一直处于编辑模式，直到你点击页面上的其他地方。

我认为Sencha将此设置为组合框编辑器的默认行为是不寻常的，但我不会抱怨。我只是想知道如何能够选择一个组合框项目，并立即采取编辑模式的单元格，但我不知道在哪里定义这个自定义行为。

下面是一个JS的小例子:

http://jsfiddle.net/FFwkM/

为子孙后代复制的代码:

var stateStore = Ext.create('Ext.data.Store', {
    fields: ['name'],
    data : [
        {"name":"Alabama"},
        {"name":"Alaska"},
        {"name":"Arizona"}
    ]
});
var gridStore = Ext.create('Ext.data.Store', {
    fields:['firstName', 'state'],
    data:{'items':[
        {"firstName":"Lisa", "state":"Alabama"},
        {"firstName":"Bart", "state":"Alabama"},
        {"firstName":"Homer", "state":"Alabama"},
        {"firstName":"Marge", "state":"Arizona"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: gridStore,
    columns: [{
        header: 'First Name',  dataIndex: 'firstName', flex: 1, editor: 'textfield'
    }, {
        header: 'State', dataIndex: 'state', flex: 1, editor: {
            xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name'
        }
    }],
    selType: 'cellmodel',
    plugins: [{
        ptype: 'cellediting',
        clicksToEdit: 2
    }],
    height: 150,
    width: 200,
    renderTo: Ext.getBody()
});

实现所需行为的一种方法是为组合框上的select事件添加侦听器，然后在处理程序中触发blur事件。例子:

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: gridStore,
    columns: [{
        header: 'First Name',  dataIndex: 'firstName', flex: 1, editor: 'textfield'
    }, {
        header: 'State', dataIndex: 'state', flex: 1, editor: {
            xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name',
            listeners: {
                select: function(combo, recs, opts){
                    combo.fireEvent('blur'); //<------
                }
            }
        }
    }],
    selType: 'cellmodel',
    plugins: [{
        ptype: 'cellediting',
        clicksToEdit: 2
    }],
    height: 150,
    width: 200,
    renderTo: Ext.getBody()
});

工作叉在这里:http://jsfiddle.net/Zd5QM/

听select事件，然后:

            listeners: {
                select: {
                    fn: function(c, r, eopts) {
                        c.ownerCt.completeEdit();
                    }
                }
            }
http://www.sencha.com/forum/showthread.php?261264-How-to-make-a-grid-cell-immediately-exit-edit-mode-when-a-combo-box-item-is-selected

相关文章：