extjs GridPanel怎么设置图片按钮点击事件

2025-05-14 02:21:13
推荐回答(1个)
回答1:

你这样的最好使用 actioncolumn , 显示效果一样...但是设置点击事件要方便的多,  可以查看下API

//下面代码是直接复制的API例子
Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    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"}
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Action Column Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        {text: 'First Name',  dataIndex:'firstname'},
        {text: 'Last Name',  dataIndex:'lastname'},
        {
            xtype:'actioncolumn',
            width:50,
            items: [{
                //这里直接通过URL设置图标
                icon: 'extjs/examples/shared/icons/fam/cog_edit.png',  
                tooltip: 'Edit',
                //这里是图标的点击事件
                //参数中有点击行的record , 所以很方便做处理
                handler: function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Edit " + rec.get('firstname'));
                }
            },{
                icon: 'extjs/examples/restful/images/delete.png',
                tooltip: 'Delete',
                handler: function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Terminate " + rec.get('firstname'));
                }
            }]
        }
    ],
    width: 250,
    renderTo: Ext.getBody()
});