Ext的Grid中使用combobox做为编辑控件时,遇到在combobox中选择了相应的选项时(displayField),在grid中却显示了valueField值。现解决如下:
Ext的Grid中使用combobox做为编辑控件时,遇到在combobox中选择了相应的选项时(displayField),在grid中却显示了valueField值。现解决如下:
图示:
![](https://www.cnblogs.com/images/cnblogs_com/sunfishlu/97376/o_combo.JPG)
js代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1
var grid;
2
function ready(queryCondition)
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
store = new Ext.data.Store(
{
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy:new Ext.data.HttpProxy(
{
24
url:url
25
}),
26![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
comStore1 = new Ext.data.Store(
{
38![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy:new Ext.data.HttpProxy(
{url:url1}),
39![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
reader: new Ext.data.JsonReader(
{
40
root:'data',
41
totalProperty: 'totalCount',
42
fields:
43
['GROUPID','GROUP_NAME']
44
})
45
}),
46
comStore1.load();
47
//读写
48![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
comStore2 = new Ext.data.Store(
{
49![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy:new Ext.data.HttpProxy(
{url:url2}),
50![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"角色编号",align:'center',sortable: false,dataIndex:'FGID',hidden:true},
63![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"命令编号",align:'center',sortable: false,dataIndex:'COMMANDID',hidden:true},
64![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"子系统",align:'center',sortable: false,dataIndex:'PARENTNAME'},
65![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"模块",align:'center',sortable: false,dataIndex:'SONNAME'},
66![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{header:"功能",align:'center',sortable: false,dataIndex:'NAME'},
67![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
68
header:"模板组",
69
dataIndex:"GROUPNAME",
70
align:'center',
71![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
96
returnvalue = record.data.GROUP_NAME;
97
}
98
return returnvalue;//注意这个地方的value是上面displayField中的value
99
}
100
},
101![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
102
header:"操作性",
103
dataIndex:"HANDLESNAME",
104
align:'center',
105![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
131
returnvalue = record.data.DMCPT;
132
}
133
return returnvalue;//注意这个地方的value是上面displayField中的value
134
}
135
}
136
]);
137
cm.defaultSortable = true;
138
139![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
loadMask:
{msg:"数据加载中,请稍等
"},
150
frame:true,
151
height: window.screen.availHeight - 200,//176,
152
width: window.screen.availWidth - s_widths,
153![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
viewConfig:
{forceFit:true},
154
region:"center",
155![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Ext.Ajax.request(
{
174
url:"../AjaxFactory/AjaxGridData.aspx?cln=UpdateRoleTemplate&orderField=FGID&orderType=asc&da="+today,
175
method:'POST',
176![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
params:
{
177
uFGID:uFGID,
178
uCOMMANDID:uCOMMANDID,
179
uGROUPNAME:uGROUPNAME,
180
uHANDLESNAME:uHANDLESNAME,
181
l:l
182
},
183![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
success:function(response)
{
184
//store.load();
185
},
186![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
failure:function(response)
{
187
Ext.MessageBox.alert("温馨提示", "请求失败!");
188
},
189
scope:this
190
});
191
},
192
this);
193![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
194![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
grid.getStore().load(
{
195![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
params:
{
196
start: 0,
197
limit: 12
198
}
199
});
200
}
201
//自适应
202
function GridOnReSize(s_widths)
203![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
204
grid.setWidth(window.screen.availWidth - s_widths);
205
grid.setHeight(window.screen.availHeight - 200);
206
}
207
关键代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1
renderer: function(value, cellmeta, record)
2![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
11
returnvalue = record.data.GROUP_NAME;
12
}
13
return returnvalue;//注意这个地方的value是上面displayField中的value
14
}