如何在Sencha中实现加载时按条件隐藏表格按钮图标

推荐优先用方案一，页面渲染时直接生效，代码简洁且性能更好；如果需要统一控制逻辑，再用方案二。

方案一：Grid列配置中使用Renderer #

直接在图标所在列的renderer函数里判断LogLevel，动态控制显示/隐藏，页面加载时自动生效：

纯HTML图标实现 #

columns: [
    // 其他列配置...
    {
        text: '警告',
        width: 50,
        renderer: function(value, metaData, record) {
            // 调用你已有的isLow判断函数
            return isLow(record.get('LogLevel')) ? '' : 
                '<span class="x-fa fa-exclamation-triangle" style="color: orange; cursor: pointer;"></span>';
        }
    }
]

WidgetColumn按钮实现 #

如果用widgetcolumn配置按钮，通过renderer给单元格加隐藏类：

{
    xtype: 'widgetcolumn',
    text: '警告',
    width: 50,
    widget: {
        xtype: 'button',
        iconCls: 'x-fa fa-exclamation-triangle',
        cls: 'alert-btn',
        style: 'color: orange;'
    },
    renderer: function(value, metaData, record) {
        if (isLow(record.get('LogLevel'))) {
            metaData.tdCls = 'x-hidden';
        }
    }
}

方案二：监听Grid事件批量处理 #

如果需要在控制器或Grid类中统一管理逻辑，监听viewready和store的load事件，遍历行控制按钮：

Grid类内直接监听 #

Ext.define('YourApp.view.YourGrid', {
    extend: 'Ext.grid.Panel',
    // 其他配置...
    listeners: {
        viewready: 'onGridViewReady',
        'storeload': 'onStoreLoad'
    },
    onGridViewReady: function(grid) {
        this.updateAlertBtns(grid);
    },
    onStoreLoad: function(store) {
        this.updateAlertBtns(this);
    },
    updateAlertBtns: function(grid) {
        grid.getStore().each(function(record) {
            var row = grid.getView().getRow(record);
            if (!row) return;
            
            var btn = row.querySelector('.alert-btn');
            if (btn) {
                btn.style.display = isLow(record.get('LogLevel')) ? 'none' : 'inline-block';
            }
        });
    }
});

控制器中处理 #

Ext.define('YourApp.controller.YourController', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.control({
            'yourgrid': {
                viewready: this.updateAlertBtns,
                'storeload': this.updateAlertBtns
            }
        });
    },
    updateAlertBtns: function(grid) {
        grid.getStore().each(function(record) {
            var row = grid.getView().getRow(record);
            if (!row) return;
            
            var btn = row.querySelector('.alert-btn');
            if (btn) {
                btn.style.display = isLow(record.get('LogLevel')) ? 'none' : '';
            }
        });
    }
});

内容的提问来源于stack exchange，提问作者Weedosaurus