Ext中combobox在Grid里显示问题

来源：互联网发布：imac 删除软件编辑：程序博客网时间：2024/06/04 18:34

Ext的Grid中使用combobox做为编辑控件时，遇到在combobox中选择了相应的选项时(displayField)，在grid中却显示了valueField值。现解决如下：

图示：

js代码：

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

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

storeMapping=["FGID","COMMANDID","PARENTNAME","FUNCTIONIDNAME","NAME","GROUPNAME","HANDLESNAME"];
20

//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

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

关键代码如下：

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

}