Ext的Grid中使用combobox做为编辑控件时,遇到在combobox中选择了相应的选项时(displayField),在grid中却显示了valueField值。现解决如下:
图示:
js代码:
1 var grid;
2 function ready(queryCondition)
3 {
4 var pageSize = 150 ;
5 var queryConditionTemplate = document.getElementById( " hid " ).value;
6 var url = " ../AjaxFactory/AjaxGridData.aspx?cln=BindCommandTemplate&orderField=FGID&pagesize= " + pageSize + " &orderType=asc&queryConditionTemplate= " + queryConditionTemplate;
7
8 var url1 = " ../AjaxFactory/AjaxGridData.aspx?cln1=BindTemplateGroup&orderField=DMCOD&orderType=asc&projectID= " + fatherID;
9 var url2 = " ../AjaxFactory/AjaxGridData.aspx?cln2=BindG050&orderField=DMCOD&orderType=asc " ;
10 // var store;
11 var comStore1;
12 var comStore2;
13 var storeMapping;
14 var addCategory;
15 var afterEdit;
16 var defaultStore;
17 var specoalStore;
18
19 storeMapping = [ " FGID " , " COMMANDID " , " PARENTNAME " , " FUNCTIONIDNAME " , " NAME " , " GROUPNAME " , " HANDLESNAME " ];
20
21 // grid 数据源
22 store = new Ext.data.Store( {
23 proxy: new Ext.data.HttpProxy( {
24 url:url
25 } ),
26 reader: new Ext.data.JsonReader( {
27 root: ' data ' ,
28 totalProperty: ' totalCount ' ,
29 fields:
30 [
31 ' FGID ' , ' COMMANDID ' , ' PARENTNAME ' , ' SONNAME ' , ' NAME ' , ' FUNCTIONID ' , ' GROUPNAME ' , ' HANDLESNAME '
32 ]
33 } ),
34 remoteSort: true
35 } );
36 // 模板组
37 comStore1 = new Ext.data.Store( {
38 proxy: new Ext.data.HttpProxy( {url:url1} ),
39 reader: new Ext.data.JsonReader( {
40 root: ' data ' ,
41 totalProperty: ' totalCount ' ,
42 fields:
43 [ ' GROUPID ' , ' GROUP_NAME ' ]
44 } )
45 } ),
46 comStore1.load();
47 // 读写
48 comStore2 = new Ext.data.Store( {
49 proxy: new Ext.data.HttpProxy( {url:url2} ),
50 reader: new Ext.data.JsonReader( {
51 root: ' data ' ,
52 totalProperty: ' totalCount ' ,
53 fields:
54 [ ' DMCOD ' , ' DMCPT ' ]
55 } )
56 } ),
57 comStore2.load();
58
59
60 var cm = new Ext.grid.ColumnModel([
61 new Ext.grid.RowNumberer(),
62 {header: " 角色编号 " ,align: ' center ' ,sortable: false ,dataIndex: ' FGID ' ,hidden: true } ,
63 {header: " 命令编号 " ,align: ' center ' ,sortable: false ,dataIndex: ' COMMANDID ' ,hidden: true } ,
64 {header: " 子系统 " ,align: ' center ' ,sortable: false ,dataIndex: ' PARENTNAME ' } ,
65 {header: " 模块 " ,align: ' center ' ,sortable: false ,dataIndex: ' SONNAME ' } ,
66 {header: " 功能 " ,align: ' center ' ,sortable: false ,dataIndex: ' NAME ' } ,
67 {
68 header: " 模板组 " ,
69 dataIndex: " GROUPNAME " ,
70 align: ' center ' ,
71 editor: new Ext.form.ComboBox( {
72 id: ' termtype ' ,
73 name: ' termtype ' ,
74 readOnly: true ,
75 fieldLabel: ' 模板组 ' ,
76 hiddenName: ' id ' ,
77 store: comStore1,
78 displayField: ' GROUP_NAME ' ,
79 valueField: ' GROUPID ' ,
80 typeAhead: true ,
81 mode: ' local ' ,
82 triggerAction: ' all ' ,
83 emptyText: ' 请选择 ' ,
84 selectOnFocus: true
85 } ),
86 renderer: function (value, cellmeta, record)
87 {
88 // 通过匹配value取得ds索引
89 var index = comStore1.find(Ext.getCmp( ' termtype ' ).valueField,value);
90 // 通过索引取得记录ds中的记录集
91 var record = comStore1.getAt(index);
92 // 返回记录集中的value字段的值
93 var returnvalue = "" ;
94 if (record)
95 {
96 returnvalue = record.data.GROUP_NAME;
97 }
98 return returnvalue; // 注意这个地方的value是上面displayField中的value
99 }
100 } ,
101 {
102 header: " 操作性 " ,
103 dataIndex: " HANDLESNAME " ,
104 align: ' center ' ,
105 editor: new Ext.form.ComboBox( {
106 id: ' termtype1 ' ,
107 name: ' termtype1 ' ,
108 readOnly: true ,
109 fieldLabel: ' 操作性 ' ,
110 hiddenName: ' id ' ,
111 store: comStore2,
112 displayField: ' DMCPT ' ,
113 valueField: ' DMCOD ' ,
114
115 typeAhead: true ,
116 mode: ' remote ' ,
117 triggerAction: ' all ' ,
118 emptyText: ' 请选择 ' ,
119 selectOnFocus: true
120 } ),
121 renderer: function (value, cellmeta, record)
122 {
123 // 通过匹配value取得ds索引
124 var index = comStore2.find(Ext.getCmp( ' termtype1 ' ).valueField,value);
125 // 通过索引取得记录ds中的记录集
126 var record = comStore1.getAt(index);
127 // 返回记录集中的value字段的值
128 var returnvalue = "" ;
129 if (record)
130 {
131 returnvalue = record.data.DMCPT;
132 }
133 return returnvalue; // 注意这个地方的value是上面displayField中的value
134 }
135 }
136 ]);
137 cm.defaultSortable = true ;
138
139 grid = new Ext.grid.EditorGridPanel( {
140 id: " topicCategoryGrid " ,
141 store:store,
142 cm:cm,
143 loadMask: true ,
144 clicksToEdit: 1 ,
145 renderTo: ' authorize ' ,
146 trackMouseOver: true ,
147 autoShow : true ,
148 autoScroll: true ,
149 loadMask: {msg: " 数据加载中,请稍等 " } ,
150 frame: true ,
151 height: window.screen.availHeight - 200 , // 176,
152 width: window.screen.availWidth - s_widths,
153 viewConfig: {forceFit: true } ,
154 region: " center " ,
155 bbar: new Ext.PagingToolbar( {
156 pageSize: 150 ,
157 store:store,
158 displayInfo: true ,
159 displayMsg: ' 当前显示 {0} - {1}条记录 /共 {2}条记录 ' ,
160 emptyMsg: " 没有数据 "
161 } )
162 } );
163 grid.on( " afteredit " ,
164 function (obj)
165 {
166 var r = obj.record;
167 var l = obj.field;
168 var uFGID = r.get( " FGID " );
169 var uCOMMANDID = r.get( " COMMANDID " );
170 var uGROUPNAME = Ext.getCmp( " termtype " ).getValue();
171 var uHANDLESNAME = Ext.getCmp( " termtype1 " ).getValue();
172 var today = new Date().getTime();
173 Ext.Ajax.request( {
174 url: " ../AjaxFactory/AjaxGridData.aspx?cln=UpdateRoleTemplate&orderField=FGID&orderType=asc&da= " + today,
175 method: ' POST ' ,
176 params: {
177 uFGID:uFGID,
178 uCOMMANDID:uCOMMANDID,
179 uGROUPNAME:uGROUPNAME,
180 uHANDLESNAME:uHANDLESNAME,
181 l:l
182 } ,
183 success: function (response) {
184 // store.load();
185 } ,
186 failure: function (response) {
187 Ext.MessageBox.alert( " 温馨提示 " , " 请求失败! " );
188 } ,
189 scope: this
190 } );
191 } ,
192 this );
193
194 grid.getStore().load( {
195 params: {
196 start: 0 ,
197 limit: 12
198 }
199 } );
200 }
201 // 自适应
202 function GridOnReSize(s_widths)
203 {
204 grid.setWidth(window.screen.availWidth - s_widths);
205 grid.setHeight(window.screen.availHeight - 200 );
206 }
207
关键代码如下:
1 renderer: function (value, cellmeta, record)
2 {
3 // 通过匹配value取得ds索引
4 var index = comStore1.find(Ext.getCmp( ' termtype ' ).valueField,value);
5 // 通过索引取得记录ds中的记录集
6 var record = comStore1.getAt(index);
7 // 返回记录集中的value字段的值
8 var returnvalue = "" ;
9 if (record)
10 {
11 returnvalue = record.data.GROUP_NAME;
12 }
13 return returnvalue; // 注意这个地方的value是上面displayField中的value
14 }