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

• 博客分类：
• EXTJS

EXT Ajax CSS prototype 配置管理 

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

Js代码  

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

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

Js代码  

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

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

Js代码  

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.     }  

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

下面是EditorGridPanel的处理代码 

Js代码  

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