Question

我有一个看起来像这样的网格：

Ext.create('Ext.grid.Grid', {
    title: 'myGrid',
    store: 'myStore',
    columns: [
        { text: 'Name',  dataIndex: 'name'},
        { text: 'Running', dataIndex: 'running' },
        { 
            xtype: 'actioncolumn',
            text:'play or stop',
            items:[
                {
                    iconCls: 'x-fa fa-play-circle',
                    handler:function(grid, rowIndex, colIndex){ play(); }
                }, {
                    iconCls: 'x-fa fa-stop-circle',
                    handler:function(grid, rowIndex, colIndex){ stop(); }
                }
            ]
        }
    ]
});

工作正常。第三列中有两个按钮：“播放按钮”和“停止按钮”。现在它们始终可见，但是我希望仅在running==false时才显示播放按钮，并且仅在running==true时才显示停止按钮。我该如何实现？

Answer 1

您可以使用getClass配置，可以为actioncolumn本身或为actioncolumn的子项指定它。 docs

然后您可以执行以下操作：

Ext.create('Ext.grid.Grid', {
    title: 'myGrid',
    store: 'myStore',
    columns: [
        {text: 'Name', dataIndex: 'name'},
        {text: 'Running', dataIndex: 'running'},
        {
            xtype: 'actioncolumn',
            text: 'play or stop',
            items: [
                {
                    getClass: function (value, metadata, record) {
                        return record.data.running ? '' : 'x-fa fa-play-circle'; 
                    },
                    handler: function (grid, rowIndex, colIndex) {
                        play();
                    }
                }, {
                    getClass: function (value, metadata, record) {
                        return record.data.running ? 'x-fa fa-stop-circle' : '';
                    },
                    handler: function (grid, rowIndex, colIndex) {
                        stop();
                    }
                }
            ]
        }
    ]
});

Answer 2

这有效：

Ext.create('Ext.grid.Grid', {
    title: 'myGrid',
    store: 'myStore',
    columns: [
        {text: 'Name', dataIndex: 'name'},
        {text: 'Running', dataIndex: 'running'},
        {
            xtype: 'actioncolumn',
            text: 'play or stop',
            items: [
                {
                    getClass: function (value, metadata, record) {
                        return record.data.running ? 'x-fa fa-stop-circle' : 'x-fa fa-play-circle'; 
                    },
                    handler: function (grid, rowIndex, colIndex) {
                        playOrStop();
                    }
                },
            ]
        }
    ]
});

如何在Ext JS中隐藏和显示位于网格内的按钮？

2 个答案: