在學(xué)習(xí)中Ext.grid.EditorGridPanel 的時(shí)候碰到一個(gè)知識(shí)點(diǎn),如何用復(fù)選框來表示真假值,當(dāng)然我們可以直接這樣
1 {
2 header : "管理員?",
3 dataIndex : 'manager',
4 width : 55,
5 editor : new Ext.form.CheckBox()
6 }
7
但是這樣給我們的感覺不是很好,每次都要我們點(diǎn)擊才會(huì)出現(xiàn)CheckBox,不能讓他默認(rèn)就顯示在哪里,而且表示當(dāng)前值?官方給了我們一個(gè)示例,下面是示例的源代碼
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: [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+'"> </div>';
166 }
167 };
168
但是問題又來了.我們點(diǎn)擊修改值而后臺(tái)卻不被更新,所以我們要對(duì)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
這樣當(dāng)我們的afteredit被觸發(fā)后就會(huì)執(zhí)行我們事先設(shè)定好的程序,調(diào)用業(yè)務(wù)邏輯修改后臺(tái)數(shù)據(jù).
下面是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 : '錯(cuò)誤提示',
18 msg : '修改數(shù)據(jù)發(fā)生錯(cuò)誤,操作將被回滾!',
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