标签：node colIndex rowIndex 列中 Ext gird grid ExtJs4 rowEl

为什么80%的码农都做不了架构师？>>>   

在ExtJs4中，grid组件有Ext.grid.column.Action组件，所有要增加操作列，只需指定列的xtype为actioncolumn即可，例如：

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 400,
    store: Ext.create('Ext.data.Store', {
        fields: ['id', 'name'],
        data: [
            {id: '1', name: '张三'},
            {id: '2', name: '李四'}
        ]
    }),
    columns: [
        {text: '姓名', dataIndex: 'name', flex: 1},
        {
            xtype: 'actioncolumn',
            text: '操作',
            width: 100,
            tdCls: 'action',
            items: [{
                icon: 'images/edit.png',
                tooltip: '编辑',
                handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {
                    // do something...
                }
            }, {
                icon: 'images/delete.png',
                tooltip: '删除',
                handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {
                    // do something...
                }
            }]
	}
    ]
});

但如果采用Ext MVC来编写的话，这样的写法就不太适合，要想把handler中的处理移到controller控制层里面去，就必须给handler绑定触发事件：

items:[{
    action: 'edit',
    icon: 'images/edit.png',
    tooltip: '编辑',
    handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {
        this.fireEvent('itemclick', this, grid, rowIndex, colIndex, node, e, record, rowEl);
    }
}, {
    action: 'delete',
    icon: 'images/delete.png',
    tooltip: '删除',
    handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {   
        this.fireEvent('itemclick', this, grid, rowIndex, colIndex, node, e, record, rowEl);
    }
}]

在controller控制层中，在来编写itemclick的事件：

init: function () {
    this.control({
        'grid actioncolumn': {
            itemclick: this.actionBtnEvent
        }
    })
},
actionBtnEvent: function (column, grid, rowIndex, colIndex, node, e, record, rowEl) {
    if (node.action == 'edit') {
        // do something...
    } else if (node.action == 'delete') {
        // do something...
    }
}

转载于:https://my.oschina.net/mayude/blog/592764

标签：node,colIndex,rowIndex,列中,Ext,gird,grid,ExtJs4,rowEl
来源： https://blog.csdn.net/weixin_34405332/article/details/91828443

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。