5

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

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

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

这是一个可以玩的小例子 JS fiddle：

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()
});
4

2 回答 2

6

实现所需行为的一种方法是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/

于 2013-04-14T19:40:09.480 回答
0

监听 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-选择

于 2015-04-15T21:58:03.057 回答