关于在ext4中，Ext.grid.column.Action里面，如何动态让每行操作列根据该行某个字段而显示不同的图标

Question

请教各位大侠，在ext4中，Ext.grid.column.Action里面，如何动态让每行的操作列根据该行某个字段的不同而显示不同的图标以及对应方法呢？

Answer 1

你要解决的问题其实就是先判断再显示图标，而你现在的方式是先显示图标，再去判断就不会有作用了。其实很简单
你在定义Ext.grid.column.Action中加上一个方法，大概意思是这样，
setIcon : function(ic){
this.icons = ic;
}
然后你初始化Ext.grid.column.Action时不配置icons属性，先去拿到record（这个你应该会吧）判断，假设如果有个字段值是1的话就用1.png,那么就拿到Ext.grid.column.Action对象调用setIcon(“1.png”),如果是0的话用0.png,那么就拿到Ext.grid.column.Action对象调用setIcon(“0.png”),

Answer 2

Ext4官方的案例第一个，array-grid，里面的actioncolumn

 xtype: 'actioncolumn',
                width: 50,
                items: [{
                    icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
                    tooltip: 'Sell stock',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        alert("Sell " + rec.get('company'));
                    }
                }, {
                    getClass: function(v, meta, rec) {          // Or return a class from a function
                        if (rec.get('change') < 0) {
                            this.items[1].tooltip = 'Hold stock';
                            return 'alert-col';
                        } else {
                            this.items[1].tooltip = 'Buy stock';
                            return 'buy-col';
                        }
                    },
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
                    }
                }]

可以那个getClass那里设置，用rec.get('xxx')来获取所在行xxx字段的值，根据不同的值返回css设置的图标。