海水正蓝

面朝大海,春暖花开
posts - 145, comments - 29, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理


在学习中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  * licensing@extjs.com
  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: [06],
 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(00);
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

只有注册用户登录后才能发表评论。


网站导航: