NSS_09 gridpanel中的actioncolumn事件

时间:2023-03-09 19:27:14
NSS_09 gridpanel中的actioncolumn事件

  在设计角色权限时, 终于用到了grid的actioncolumn,如下:

{
header: '权限设定',
xtype: 'actioncolumn',
items: [{
icon: 'Content/images/cog_edit.png',
tooltip: '权限设定',
handler: function (grid, rowIndex, colIndex) {
//var rec = grid.getStore().getAt(rowIndex);
//alert("Edit " + rec.get('Role_name'));
}]
},

  这是官方示例中的事件处理方式,但是用这种方式很明显的不符合MVC的模式, 要怎么才能够在MVC模式中应用actioncolumn的事件呢?

  因为actioncolumn中的元素,它只是一张图片,而不是Extjs中的组件, 所以不能应用以下方式:

this.control({
'mygrid actioncolumn button[type=edit]' : this.onEdit

  上面的方式,应该是最好的, 但不幸的是它是不可能实现的, 但是有另一种方法, 它和上面的一样简洁:让actioncolumn的处理函数去触发grid的自定义事件(由你自己定义),

handler: function(grid, rowIndex, colIndex) {
// fire custom event "itemeditbuttonclick"
this.up('grid').fireEvent('itemeditbuttonclick', grid, rowIndex, colIndex);
}

然后控制器上实现如下:

this.control({
'viewport > testpanel': {
itemeditbuttonclick: this.onEdit,
itemdeletebuttonclick: this.onDelete
}
});

感慨一下,国外的extjs资料确实多啊。

自定义事件原理以后再深入了解吧, 最近做项目每天脑袋胀胀的

------------------------------------------------

发现在此函数中, 给grid添加window, grid.add('')时会报错, 然后 debug发现grid是Ext.grid.View类型, 从属性中看到ownCt属性, 哈哈。

[参考]http://*.com/questions/12716675/how-to-perform-view-controller-separation-when-using-an-actioncolumn-ext-grid