extjs actioncolumn依据数据显示隐藏操作按钮

　　extjs actioncolumn如何依据当前数据行的某些值来实现隐藏actioncolumn的items中的icon图标。

　　配置extjs actioncolumn的items项中的getClass可以实现给icon添加特殊样式，然后此特殊样式设置display:none实现icon的隐藏。

　　actioncolumn items项目配置说明，http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.ActionColumn-cfg-items 啊虽然API说是3.4+才支持，进测试3.3也支持。

items : Array

An Array which may contain multiple icon definitions, each element of which may contain:

• icon : String
  The url of an image to display as the clickable element in the column.
• iconCls : String
  A CSS class to apply to the icon image. To determine the class dynamically, configure the item with a getClass function.
• getClass : Function

  A function which returns the CSS class to apply to the icon image. The function is passed the following parameters:

  • v : Object

    The value of the column's configured field (if any).

  • metadata : Object

    An object in which you may set the following attributes:

    • css : String

      A CSS class name to add to the cell's TD element.

    • attr : String

      An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"').

  • r : Ext.data.Record

    The Record providing the data.

  • rowIndex : Number

    The row index..

  • colIndex : Number

    The column index.

  • store : Ext.data.Store

    The Store which is providing the data Model.

• handler : Function
  A function called when the icon is clicked.
• scope : Scope
  The scope (this reference) in which the handler and getClass functions are executed. Fallback defaults are this Column's configured scope, then this Column.
• tooltip : String
  A tooltip message to be displayed on hover. Ext.QuickTips must have been initialized.

Available since: Ext JS 3.4.0

　以下示例代码居于ext-3.3.0\examples\grid\grid-plugins.html修改，修改第一个grid，增加actioncolumn，当price价格大于50返回hideop操作，隐藏此icon。

    var grid1 = new xg.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel({
            defaults: {
                width: 20,
                sortable: true
            },
            columns: [
                expander,
                {id:'company',header: "Company", width: 40, dataIndex: 'company'},
                {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: "Change", dataIndex: 'change'},
                {header: "% Change", dataIndex: 'pctChange'},
                { header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' },
                {//新增actioncolumn，价格大于50添加hideop样式
                    xtype: 'actioncolumn', header: 'operate', items: [{
                        icon: '1.png', getClass: function (v, meta, r) {
                            if (r.get('price') > 50) return 'hideop';
                            return ''
                        }
                    }]
                }
            ]
        })

hideop样式

.hideop{display:none}

加支付宝好友偷能量挖...