如何禁用 ExtJS 网格中的控件?

Posted

技术标签:

【中文标题】如何禁用 ExtJS 网格中的控件?【英文标题】:How do I disable a control in an ExtJS grid? 【发布时间】:2012-07-11 19:42:54 【问题描述】:

我正在使用 ExtJs 3.4。我在 ExtJs 网格中有一个复选框控件。我想根据商店中的值何时等于零来禁用复选框控件。

我已经尝试过了,它并没有禁用它:

var colModel = new Ext.grid.ColumnModel(
    
        columns: [
             id: 'AircraftOid', header: "AircraftOid", width: 100, sortable: true, locked: true, dataIndex: 'AircraftOid', hidden: true ,
             id: 'nNumber', header: "N-#", width: 100, sortable: true, locked: true, dataIndex: 'NNumber' ,
             header: "Make", width: 150, sortable: true, dataIndex: 'Make' ,
             header: "Model", width: 150, sortable: true, dataIndex: 'Model' ,
             header: "Register",
                width: 55,
                sortable: true,
                dataIndex: 'Register',
                xtype: 'checkcolumn'
            
        ],
        isCellEditable: function (col, row) 
            return false;
        
    );

var grid = new Ext.grid.GridPanel(
        store: aircraftStore,
        cm: colModel,
        sm: new Ext.grid.RowSelectionModel( singleSelect: true ),
        viewConfig: 
            forceFit: true
        ,
        height: 100,
        split: true,
        region: 'north'
    );

提前致谢。

【问题讨论】:

您是否尝试将渲染器属性添加到复选框列?我的意思是 header: "Register", width: 55, sortable: true, dataIndex: 'Register', xtype: 'checkcolumn', renderer: renderFunction 【参考方案1】:

你的想法是对的。但是……

首先,您要覆盖列模型的 isCellEditable 方法以防止编辑。但 Grid 不调用该方法。它仅适用于 EditorGrid

其次,Ext.ux.grid.CheckColumn 不处理任何可编辑的功能,因为它不是编辑器,它只是一个列.

所以对于我的项目,我对其进行了修改以充当编辑器,并添加了 readOnly 属性以防止在普通网格上进行编辑。如果将 readOnly 设置为 true,它将不再可点击。

Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, 
    processEvent : function(name, e, grid, rowIndex, colIndex) 
        if ( !this.readOnly && name == 'mousedown' ) 
            grid.stopEditing();
            var record = grid.store.getAt(rowIndex);
            var cm = grid.getColumnModel();
            var edit_e = 
                grid: grid,
                record: record,
                field: this.dataIndex,
                value: record.data[this.dataIndex],
                row: rowIndex,
                column: colIndex,
                cancel: false
            ;
            if ( grid.fireEvent( 'beforeedit', edit_e ) !== false && !edit_e.cancel ) 
                record.set( this.dataIndex, !record.data[this.dataIndex] );
                edit_e.cancel = null;
                grid.fireEvent( 'afteredit', edit_e );
            
            return false;
         else 
            return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
        
    ,

    editable : false,

    readOnly : false,

    renderer : function(v, p, record)
        p.css += ' x-grid3-check-col-td'; 
        return String.format('<div class="x-grid3-check-col0">&#160;</div>', v ? '-on' : '');
    ,

    init: Ext.emptyFn
);

Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;

Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;

【讨论】:

以上是关于如何禁用 ExtJS 网格中的控件?的主要内容,如果未能解决你的问题,请参考以下文章

ExtJS 4 - 如何禁用特定行中的复选框

Extjs 禁用本机网格滚动

如果网格为空,Extjs 4 禁用排序

如何在 Extjs 网格中禁用删除图标

网格面板中的 ExtJs 5.1 分页工具栏

ExtJS:EditorGrid 中的多选组合