Javascript 使用 Ext.define() 扩展网格面板时如何添加行双击事件侦听器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5751616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add row double click event listener when extending grid panel with Ext.define()?
提问by Petrunov
I am extending GridPanel with Ext.define() (Ext v4).
我正在使用 Ext.define() (Ext v4) 扩展 GridPanel。
I need to get the row data when a grid row is double clicked. At this point I cannot even get the event listener working:
我需要在双击网格行时获取行数据。在这一点上，我什至无法让事件侦听器正常工作：
Ext.define('Application.usersGrid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.usersgrid',
viewConfig: {
listeners: {
dblclick: function(dataview, index, item, e) {
alert('dblclick');
}
}
},
...
What is wrong here?
这里有什么问题？
If anyone needs the answer- this is the right way:
如果有人需要答案-这是正确的方法：
Ext.define('Application.usersGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.usersgrid',
viewConfig: {
listeners: {
itemdblclick: function(dataview, record, item, index, e) {
alert('itemdblclick');
}
}
},
...
http://dev.sencha.com/new/ext-js/4-0/api/Ext.grid.GridView#event-itemdblclick
http://dev.sencha.com/new/ext-js/4-0/api/Ext.grid.GridView#event-itemdblclick
回答by Abdel Raoof
You don't need to put the listener in the viewconfig. Here is my working configuration:
您不需要将侦听器放在 viewconfig 中。这是我的工作配置：
listeners : {
itemdblclick: function(dv, record, item, index, e) {
alert('working');
}
},
Another thing is, you seems to have used Ext.grid.GridPanelin the extend property. But in documentation it's Ext.grid.Panel. But even with gridpanel, everything seems to work fine.
另一件事是，您似乎已经使用Ext.grid.GridPanel了extend 属性。但在文档中它是Ext.grid.Panel. 但即使使用 gridpanel，一切似乎也能正常工作。
I would suggest to use the Ext JS 4 terms as it might cause to application breakage later in other 4.x versions.
我建议使用 Ext JS 4 术语，因为它可能会导致以后其他 4.x 版本中的应用程序损坏。
Now, if you are using the new MVC architecture, you will want to move these actions to the controller rather than the view. You can refer to the MVC Architecture guide for details.
现在，如果您正在使用新的 MVC 架构，您将希望将这些操作移动到控制器而不是视图。您可以参考 MVC 架构指南了解详细信息。
回答by ctp
With the MVC approach in ExtJS 4 there's another smart way too to define such handlers. Some example code:
使用 ExtJS 4 中的 MVC 方法，还有另一种聪明的方法来定义这样的处理程序。一些示例代码：
Ext.define('App.controller.Documents', {
extend: 'Ext.app.Controller',
stores: ['Documents'],
models: ['Document'],
views: [
'document.List',
'document.Edit',
'document.Preview'
],
init: function() {
this.control({
/*
* a cool way to select stuff in ExtJS 4
*/
'documentlist': {
itemdblclick: this.editDocument
},
/*
* simple access to components
*/
'documentedit button[action=save]': {
click: this.updateDocument
},
});
},
editDocument: function(grid, record) {
var view = Ext.widget('documentedit');
view.down('form').loadRecord(record);
},
updateDocument: function(button) {
var win = button.up('window'), // new selection API
form = win.down('form'), // in ExtJS 4
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
}
});
回答by works
listeners: {
select: 'xxxx',
itemdblclick: function (dv, record, item, index, e) {
var myBtn = Ext.getCmp('btnEdit');
myBtn.onClick();
}
},
