Ext中combobox在Grid里显示问题

最新推荐文章于 2019-04-19 15:16:10 发布

wangwei22

最新推荐文章于 2019-04-19 15:16:10 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： ext header function url

本文链接：https://blog.youkuaiyun.com/wangwei22/article/details/6051599

本文介绍如何解决 Ext 的 Grid 中使用 combobox 作为编辑控件时，选择项显示错误的问题。通过自定义 renderer 方法，实现了正确展示 combobox 的 displayField 值而不是 valueField 值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

}