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也支持。

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。

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

    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}

 



原创文章,转载请注明出处:extjs actioncolumn依据数据显示隐藏操作按钮
评论(0)Web开发网
阅读(81)喜欢(0)不喜欢(0)extjs