如何禁用ExtJS網格中的控件？

我正在使用ExtJs 3.4。我在ExtJs Grid中有一個複選框控件。我想根據存儲中的值何時等於零來禁用複選框控件。如何禁用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' 
    });

感謝。

來源

2012-07-11 Greg ' ' Wildman' ' Finzer

您是否嘗試將renderer屬性添加到複選框列？我的意思是{頭：「註冊」，寬度：55，排序：真實， dataIndex： '註冊'，的xtype： 'checkcolumn'，渲染：renderFunction } – scusyxx 2012-07-11 22:15:33

你的想法是對的。但是...

首先，您將重寫列模型的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-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;

來源

2012-07-11 22:22:55 ncank

這個工程，日Thnx – peter 2015-03-03 10:35:40

如何禁用ExtJS網格中的控件？

回答

相關問題