[转]EXT EditorGridPanel 中用复选框表示真假值,扩展官方示例

在学习中Ext.grid.EditorGridPanel 的时候碰到一个知识点,如何用复选框来表示真假值,当然我们可以直接这样

1  {
2     header :  " 管理员? " ,
3     dataIndex : 'manager',
4     width :  55 ,
5     editor :  new  Ext.form.CheckBox()
6  }
7 

但是这样给我们的感觉不是很好,每次都要我们点击才会出现CheckBox,不能让他默认就显示在哪里,而且表示当前值?官方给了我们一个示例,下面是示例的源代码

  1  /*
  2   * Ext JS Library 2.2
  3   * Copyright(c) 2006-2008, Ext JS, LLC.
  4   * [email protected]
  5   * 
  6   * http://extjs.com/license
  7    */
  8 
  9  Ext.onReady( function (){
 10      Ext.QuickTips.init();
 11 
 12       function  formatDate(value){
 13           return  value  ?  value.dateFormat('M d, Y') : '';
 14      };
 15       //  shorthand alias
 16       var  fm  =  Ext.form;
 17 
 18       //  custom column plugin example
 19       var  checkColumn  =   new  Ext.grid.CheckColumn({
 20         header:  " Indoor? " ,
 21         dataIndex: 'indoor',
 22         width:  55
 23      });
 24 
 25       //  the column model has information about grid columns
 26       //  dataIndex maps the column to the specific data field in
 27       //  the data store (created below)
 28       var  cm  =   new  Ext.grid.ColumnModel([{
 29             id:'common',
 30             header:  " Common Name " ,
 31             dataIndex: 'common',
 32             width:  220 ,
 33             editor:  new  fm.TextField({
 34                 allowBlank:  false
 35             })
 36          },{
 37             header:  " Light " ,
 38             dataIndex: 'light',
 39             width:  130 ,
 40             editor:  new  Ext.form.ComboBox({
 41                 typeAhead:  true ,
 42                 triggerAction: 'all',
 43                 transform:'light',
 44                 lazyRender: true ,
 45                 listClass: 'x - combo - list - small'
 46              })
 47          },{
 48             header:  " Price " ,
 49             dataIndex: 'price',
 50             width:  70 ,
 51             align: 'right',
 52             renderer: 'usMoney',
 53             editor:  new  fm.NumberField({
 54                 allowBlank:  false ,
 55                 allowNegative:  false ,
 56                 maxValue:  100000
 57             })
 58          },{
 59             header:  " Available " ,
 60             dataIndex: 'availDate',
 61             width:  95 ,
 62             renderer: formatDate,
 63             editor:  new  fm.DateField({
 64                  format: 'm / d / y',
 65                  minValue: ' 01 / 01 / 06 ',
 66                  disabledDays: [ 0 ,  6 ],
 67                  disabledDaysText: 'Plants are not available on the weekends'
 68              })
 69          },
 70          checkColumn
 71      ]);
 72 
 73       //  by default columns are sortable
 74      cm.defaultSortable  =   true ;
 75 
 76       //  this could be inline, but we want to define the Plant record
 77       //  type so we can add records dynamically
 78       var  Plant  =  Ext.data.Record.create([
 79              //  the "name" below matches the tag name to read, except "availDate"
 80              //  which is mapped to the tag "availability"
 81             {name: 'common', type: 'string'},
 82             {name: 'botanical', type: 'string'},
 83             {name: 'light'},
 84             {name: 'price', type: ' float '},              //  automatic date conversions
 85             {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm / d / Y'},
 86             {name: 'indoor', type: 'bool'}
 87        ]);
 88 
 89       //  create the Data Store
 90       var  store  =   new  Ext.data.Store({
 91           //  load using HTTP
 92          url: 'plants.xml',
 93 
 94           //  the return will be XML, so lets set up a reader
 95          reader:  new  Ext.data.XmlReader({
 96                  //  records will have a "plant" tag
 97                 record: 'plant'
 98             }, Plant),
 99 
100          sortInfo:{field:'common', direction:'ASC'}
101      });
102 
103       //  create the editor grid
104       var  grid  =   new  Ext.grid.EditorGridPanel({
105          store: store,
106          cm: cm,
107          renderTo: 'editor - grid',
108          width: 600 ,
109          height: 300 ,
110          autoExpandColumn:'common',
111          title:'Edit Plants ? ',
112          frame: true ,
113          plugins:checkColumn,
114          clicksToEdit: 1 ,
115 
116          tbar: [{
117              text: 'Add Plant',
118              handler :  function (){
119                   var  p  =   new  Plant({
120                      common: 'New Plant  1 ',
121                      light: 'Mostly Shade',
122                      price:  0 ,
123                      availDate: ( new  Date()).clearTime(),
124                      indoor:  false
125                  });
126                  grid.stopEditing();
127                  store.insert( 0 , p);
128                  grid.startEditing( 0 ,  0 );
129              }
130          }]
131      });
132 
133       //  trigger the data store load
134      store.load();
135  });
136 
137  Ext.grid.CheckColumn  =   function (config){
138      Ext.apply( this , config);
139       if ( ! this .id){
140           this .id  =  Ext.id();
141      }
142       this .renderer  =   this .renderer.createDelegate( this );
143  };
144 
145  Ext.grid.CheckColumn.prototype  = {
146      init :  function (grid){
147           this .grid  =  grid;
148           this .grid.on('render',  function (){
149               var  view  =   this .grid.getView();
150              view.mainBody.on('mousedown',  this .onMouseDown,  this );
151          },  this );
152      },
153 
154      onMouseDown :  function (e, t){
155           if (t.className  &&  t.className.indexOf('x - grid3 - cc - ' + this .id)  !=   - 1 ){
156              e.stopEvent();
157               var  index  =   this .grid.getView().findRowIndex(t);
158               var  record  =   this .grid.store.getAt(index);
159              record.set( this .dataIndex,  ! record.data[ this .dataIndex]);
160          }
161      },
162 
163      renderer :  function (v, p, record){
164          p.css  +=  ' x - grid3 - check - col - td'; 
165           return  ' < div class = " x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+' " >& # 160 ; </ div > ';
166      }
167  };
168 

但是问题又来了.我们点击修改值而后台却不被更新,所以我们要对onMouseDown修改一下.

 1  onMouseDown :  function (e, t) {
 2           if  (t.className  &&  t.className.indexOf('x - grid3 - cc - '  +   this .id)  !=   - 1 ) {
 3              e.stopEvent();
 4               var  index  =   this .grid.getView().findRowIndex(t);
 5               var  cindex  =   this .grid.getView().findCellIndex(t);
 6               var  record  =   this .grid.store.getAt(index);
 7               var  field  =   this .grid.colModel.getDataIndex(cindex);
 8               var  e  =  {
 9                  grid :  this .grid,
10                  record : record,
11                  field : field,
12                  originalValue : record.data[ this .dataIndex],
13                  value :  ! record.data[ this .dataIndex],
14                  row : index,
15                  column : cindex,
16                  cancel :  false
17              };
18               if  ( this .grid.fireEvent( " validateedit " , e)  !==   false   &&   ! e.cancel) {
19                   delete  e.cancel;
20                  record.set( this .dataIndex,  ! record.data[ this .dataIndex]);
21                   this .grid.fireEvent( " afteredit " , e);
22              }
23          }
24      }
25 

这样当我们的afteredit被触发后就会执行我们事先设定好的程序,调用业务逻辑修改后台数据.

下面是EditorGridPanel的处理代码

 1  // 其他代码省略,这里是grid的listeners属性的配置代码
 2 
 3  listeners : {
 4          'afteredit' :  function (e) {
 5              Ext.Ajax.request({
 6                  url : 'updateUser.action',
 7                  params : {
 8                      filedName : e.field,
 9                      fieldValue : e.value,
10                      userId : e.record.data.userId
11                  },
12                  success :  function () {
13                       // alert('ok');
14                  },
15                  failure :  function () {
16                      Ext.Msg.show({
17                          title : '错误提示',
18                          msg : '修改数据发生错误,操作将被回滚 ! ',
19                          fn :  function () {
20                              e.record.set(e.field, e.originalValue);
21                          },
22                          buttons : Ext.Msg.OK,
23                          icon : Ext.Msg.ERROR
24                      });
25                  }
26              });
27          }
28      }
29 

http://yourgame.iteye.com/blog/245619