如何在ExtJS网格中禁用控件？ [英] How do I disable a control in an ExtJS grid?

问题描述

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

我已经尝试过并且不会禁用它：

  var colModel = new Ext.grid.ColumnModel（
 {
列：[
 {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：'注册'，
 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' 
}）; 
  

提前感谢

解决方案

你的想法是正确的。但是...

首先，您将覆盖列模型的 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）; 
} 
返回false; 
} else {
 return Ext.grid.ActionColumn.superclass.processEvent.apply（this，arguments）; 
} 
}，
 
可编辑：false，
 
 readOnly：false，
 
 renderer：function（v，p ，record）{
 p.css + ='x-grid3-check-col-td'; 
 return String.format（'< div class =x-grid3-check-col {0}>&＃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; 
  

I am using ExtJs 3.4. I have a checkbox control in an ExtJs Grid. I want to disable the checkbox control based on when a value in the store is equal to zero.

I have tried this and it does not disable it:

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'
    });

Thanks in advance.

解决方案

Your thought was right. But...

First, you're overriding column model's isCellEditable method to prevent editing. But Grid doesn't calls that method. It only works on EditorGrid.

Second, Ext.ux.grid.CheckColumn doesn't handle any editable features, because it's not an editor, it's just a column.

So for my project i modified it to act as a editor and added the readOnly property to prevent editing on normal Grids. If you set readOnly to true, it'll not be clickable anymore.

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-col{0}">&#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网格中禁用控件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！