Ext JS 3.4:用于单元格编辑的事件监听器

Posted

技术标签:

【中文标题】Ext JS 3.4:用于单元格编辑的事件监听器【英文标题】:Ext JS 3.4 : Event listener for cell editing 【发布时间】:2018-12-05 02:58:23 【问题描述】:

我正面临使用Ext Js 3.4 中的单元格编辑器触发编辑事件的问题。

我正在尝试在按'Enter' 后编辑的单元格上触发 ajax 调用。

目前,我只是替换为console.log('hi'),但在我按下'Enter' 后它没有显示任何内容。

我不确定我的代码有什么问题。感谢有人可以指出它。谢谢。

var grid = new Ext.grid.EditorGridPanel(
    store: api_store,
    loadMask: true,
    clicksToEdit: 1,
    tbar: [
        text: 'Create',
        handler: function ()  
    ],
    columns: [
        
            id: 'name',
            header: 'Key Name',
            width: 300,
            sortable: true,
            dataIndex: 'name',
            editor: 
                xtype: 'textfield',
                allowBlank: false,
                listener: 
                    edit: function (el) 
                        console.log('hi');
                    
                
            
        ,
        
            header: 'Key Value',
            width: 500,
            sortable: false,
            dataIndex: 'key'
        
    ],
    sm: new Ext.grid.RowSelectionModel( singleSelect: true ),
    viewConfig: 
        forceFit: true
    ,
    height: 210,
    stripeRows: true,
    height: 350,
    title: 'Keys'
);

【问题讨论】:

【参考方案1】:

解决方案:

使用 EditorGridPanel afteredit 事件:

编辑后(e)

在编辑单元格后触发。编辑事件对象具有以下内容 属性

网格 - 这个网格 记录 - 正在编辑的记录 field - 正在编辑的字段名称 value - 正在设置的值 originalValue - 字段的原始值,在编辑之前。 row - 网格行索引 column - 网格列索引

参数:

e : Object 一个编辑事件(参见上面的描述)

示例:

Ext.onReady(function ()         

        var api_store = new Ext.data.ArrayStore(
            fields: ['key', 'name'],
            data: [
                ['1', 'Name1'],
                ['2', 'Name2'],
                ['3', 'Name3']
            ]
        );


        var grid = new Ext.grid.EditorGridPanel(
            renderTo: Ext.getBody(),
            store: api_store,
            loadMask: true,
            clicksToEdit: 1,
            tbar: [
                text: 'Create',
                handler: function ()  
            ],
            listeners: 
                afteredit: function(e) 
                    console.log('After edit. Column: ' + e.field);
                
            ,
            columns: [
                
                    id: 'name',
                    header: 'Key Name',
                    width: 300,
                    sortable: true,
                    dataIndex: 'name',
                    editor: 
                        xtype: 'textfield',
                        allowBlank: false
                    
                ,
                
                    header: 'Key Value',
                    width: 500,
                    sortable: false,
                    dataIndex: 'key'
                
            ],
            sm: new Ext.grid.RowSelectionModel( singleSelect: true ),
            viewConfig: 
                forceFit: true
            ,
            height: 210,
            stripeRows: true,
            height: 350,
            title: 'Keys'
        );     

);

【讨论】:

以上是关于Ext JS 3.4:用于单元格编辑的事件监听器的主要内容,如果未能解决你的问题,请参考以下文章

Ext js 编辑器网格禁用多行选择

表格单元格事件侦听器

怎样锁定Ext EditorGridPanel单元格编辑功能

如何在单击网格单元格时调用 js 函数?

Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel

EXT Grid celleditor列编辑,动态控制某一单元格只读