在学习中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: [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
但是问题又来了.我们点击修改值而后台却不被更新,所以我们要对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