关于Extjs gird使用checkbox的方法

  EXT EditorGridPanel 中使用Ext.grid.CheckColumn 收藏

在EditorGridPanel中无法使用默认的CheckBox控件,因此采用第三方扩展的控件实现,

以下是Ext.grid.CheckColu扩展类:

 

view plain copy to clipboard print ?
  1. Ext.grid.CheckColumn = function(config)  {  
  2.     Ext.apply(this, config);  
  3.     if(!this.id)  {  
  4.     this.id = Ext.id();  
  5.     }  
  6.     this.renderer = this.renderer.createDelegate(this);  
  7. };  
  8. Ext.grid.CheckColumn.prototype =  {  
  9. init : function(grid)  {  
  10.     this.grid = grid;  
  11.     this.grid.on('render'function()  {  
  12.     var view = this.grid.getView();  
  13.     view.mainBody.on('mousedown'this.onMouseDown, this);  
  14.     }, this);  
  15. },   
  16.   
  17. onMouseDown : function(e, t)  {  
  18.     if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)  {  
  19.     e.stopEvent();  
  20.     var index = this.grid.getView().findRowIndex(t);  
  21.     var record = this.grid.store.getAt(index);  
  22.     record.set(this.dataIndex, !record.data[this.dataIndex]);  
  23.     }  
  24. },   
  25.   
  26. renderer : function(v, p, record)  {  
  27.     p.css += ' x-grid3-check-col-td';  
  28.     return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';  
  29. }  
  30. }   

 

在工程中使用:

首先创建对象

 

view plain copy to clipboard print ?
  1. var checkColumn = new Ext.grid.CheckColumn({  
  2.                    header: "",  
  3.                    dataIndex: 'indoor',  
  4.                    width: 55  
  5.         });  

 

然后,在editorgrid组件中引入插件plugins:checkColumn(必须的)。

创建cm加入checkColumn:

 

view plain copy to clipboard print ?
  1. cm: new Ext.grid.ColumnModel(  
  2.                                 [  
  3.                                 checkColumn  
  4.                                 ,  
  5.                                 {  
  6.                                     id: 'min'  
  7.                                     ,header: '最小值'  
  8.                                     ,dataIndex: 'min'  
  9.                                     ,editor: new Ext.form.NumberField({  
  10.                                         allowBlank: false  
  11.                                     })  
  12.                             )  

 

创建Record对象也要加入相关内容:

 

view plain copy to clipboard print ?
  1. var Record = Ext.data.Record.create([  
  2.              {name: 'indoor', type: 'bool'}  
  3.             ,{name: 'min'}  
  4.             ,{name: 'max'}  
  5.             ,{name: 'alarmType'}  
  6.         ]);  

 

最后创建Record:

 

view plain copy to clipboard print ?
  1. var newRecord = new Record({indoor: false,min: min, max: max, alarmType: '轻微'});  

 

你可能感兴趣的:(关于Extjs gird使用checkbox的方法)