Extjs6.2 使用GridPanel

GridPanel添加 actioncolumn

Ext.define('App.view.gridList', {
    extend: 'Ext.grid.Panel',
    ...

    columns: [{
        xtype:'actioncolumn',
        text: '操作', width:150, align:'center',
        items: [{
            iconCls: 'x-fa fa-edit',
            tooltip: '编辑',
            handler: function(grid, rowIndex, colIndex) {
                /** 获取此列dataIndex值为name的value **/
                var name = grid.getStore().getAt(rowIndex).get('name');
                console.log("Edit " + name );
            }
        }]
    }]
});

GridPanel使用actioncolumn根据条件动态显示按钮文字和图标

Ext.define('App.view.gridList', {
    extend: 'Ext.grid.Panel',
    ...

    columns: [{
        xtype : 'actioncolumn',
        text : '操作', width:150, align:'center',
        items : [{
            //动态设置按钮图标
            getClass: function(v, meta, rec) {
                var stateName = rec.data.stateName;
                if(stateName=='冻结中'){
                    return 'x-fa fa-check-circle';
                }else if(stateName=='使用中'){
                    return 'x-fa fa-exclamation-circle';
                }
            },
            //动态设置按钮提示文字
            getTip: function(value, metadata, record, row, col, store){
                var stateName = record.data.stateName;
                if(stateName=='冻结中'){
                    return '解冻';
                }else if(stateName=='使用中'){
                    return '冻结';
                }
            },
            handler: function(grid, rowIndex, colIndex) {
                //然后根据grid字段的值作为判断条件去判断这里该进行什么操作
            }
        }}
    }]
});

GridPanel使用actioncolumn动态判断是否禁用按钮

Ext.define('App.view.gridList', {
    extend: 'Ext.grid.Panel',
    ...

    columns: [{
        xtype : 'actioncolumn',
        text : '操作', width:150, align:'center',
        items : [{
            iconCls: 'x-fa fa-edit',
            tooltip: '编辑',
            /** 返回true禁用，返回false不禁用 **/
            isDisabled: function(view, rowIndex, colIndex, item, record){
                return true;
            }
        }}
    }]
});

gridPanel是否支持复制

Ext.define('App.view.gridList', {
    extend: 'Ext.grid.Panel',
    ...

    /** enableTextSelection属性代表gridPanel是否支持复制, 默认为 false **/
    viewConfig:{  
        enableTextSelection:true  
    }
});