网上看了几个例子，但都不纯粹。因为他们的actioncolumn items 也不纯粹是view层代码，他们也写handler的函数，函数里面触发一个事件，controller里面在捕捉这个事件。
有没有纯粹一点的写法。在view层里面不写任何控制代码。在controller里面获取到组件，在为组件添加事件监听。
这是网上的实现方式
Ext.define('MyApp.view.Test', {
extend: 'Ext.grid.Panel',
title: 'Action Column Demo',
alias: 'widget.testpanel',
store: Ext.create('Ext.data.Store', {
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [
{
firstname: "Michael",
lastname: "Scott"},
{
firstname: "Dwight",
lastname: "Schrute"},
{
firstname: "Jim",
lastname: "Halpert"},
{
firstname: "Kevin",
lastname: "Malone"},
{
firstname: "Angela",
lastname: "Martin"}
]
}),
columns: [
{
text: 'First Name',
dataIndex: 'firstname'},
{
text: 'Last Name',
dataIndex: 'lastname'},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'http://cdn.sencha.io/ext-4.1.0-gpl/examples/shared/icons/fam/cog_edit.png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
// fire custom event "itemeditbuttonclick".
// By the way "this" refers to actioncolumn. That's why we have to do "up('grid')"
this.up('grid').fireEvent('itemeditbuttonclick', grid, rowIndex, colIndex);
}},
{
icon: 'http://cdn.sencha.io/ext-4.1.0-gpl/examples/restful/images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
// fire custom event "itemdeletebuttonclick"
this.up('grid').fireEvent('itemdeletebuttonclick', grid, rowIndex, colIndex);
}}]}
],
initComponent: function() {
// register custom events
this.addEvents('itemdeletebuttonclick', 'itemeditbuttonclick');
this.callParent(arguments);
}
});
/******************
THE CONTROLLER
******************/
Ext.define('MyApp.controller.Test', {
extend: 'Ext.app.Controller',
views: [
'Test'
],
init: function() {
this.control({
'viewport > testpanel': {
// custom events of the "testpanel" can be easily handled via controller's "control"
itemeditbuttonclick: this.onEdit,
itemdeletebuttonclick: this.onDelete
}
});
},
onEdit: function(grid, row, col) {
alert('Edit ' + row + ' ' + col);
},
onDelete: function(grid, row, col) {
alert('Delete ' + row + ' ' + col);
}
});
/******************
THE APP
******************/
Ext.application({
name: 'MyApp',
controllers: ['Test'],
launch: function() {
Ext.create('Ext.container.Viewport', {
items: {
xtype: 'testpanel'
}
});
}
});
