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 EditorGridPanel单元格编辑功能