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

Posted 2023-02-26

【中文标题】在可编辑网格中，如何使 Ext 组合框在选择项目时立即完成编辑模式？

【英文标题】：In an editable grid, how to make an Ext combo box immediately finish edit mode when selecting an item?

【发布时间】：2013-04-14 17:33:51

【问题描述】：

我已经使用 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()
);

【参考方案1】：

实现所需行为的一种方法是在组合框上添加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/

【参考方案2】：

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