ExtJS4.2学习(10)分组表格控件--GroupingGrid

分组表格控件在我们的开发中经常被用到，GroupingGrid分组表格就是在普通表格的基础上，根据某一列的数据显示表格中的数据分组的表格控件。举个例子给大家，比如某些信息用树形显示觉得有点大才小用，树形可以有无限极，但是用了分组表格可以完美的展示信息，看下图是我的项目中用到的一个例子，将所有评分项显示出来，并且动态获取是否有次数，如果有次数将出现可编辑，没有次数就不可编辑，如果需要扣分就出现链接，没有就不出现，这正好结合了我们前几节学的知识，看下面的图：

具体代码：我这里是在其他组件中弹出的这个分组表格控件，所以大家看重点代码即可，当时写这个功能可花费了不少时间，大家好好研究哈~

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

<code>    </code><code>actions.push(</code>

<code>        </code><code>{</code>

<code>            </code><code>text: </code><code>'评分'</code><code>,</code>

<code>            </code><code>iconCls: </code><code>'gradebtn'</code><code>,</code>

<code>            </code><code>listeners: {</code>

<code>                </code><code>'click'</code> <code>: </code><code>function</code><code>() {</code>

<code>                    </code><code>var</code> <code>xg = Ext.grid;</code>

<code>                </code> 

<code>                    </code><code>var</code> <code>store = </code><code>new</code> <code>Ext.data.GroupingStore({</code>

<code>                            </code><code>autoLoad:</code><code>true</code><code>,</code>

<code>                            </code><code>reader: </code><code>new</code> <code>Ext.data.JsonReader({</code>

<code>                                </code><code>root: </code><code>'data'</code><code>,</code>

<code>                                </code><code>totalProperty: </code><code>'total'</code><code>,</code>

<code>                                </code><code>remoteSort: </code><code>true</code>

<code>                            </code><code>},</code>

<code>                            </code><code>[</code>

<code>                                </code><code>{name:</code><code>'groupid'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'groupname'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'itemid'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'itemgroupid'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'itemname'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'itemvalue'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'isnumber'</code><code>},</code>

<code>                                </code><code>{name:</code><code>'status'</code><code>,type:</code><code>'boolean'</code><code>},</code>

<code>                                </code><code>{name: </code><code>'desc'</code><code>}</code>

<code>                            </code><code>]),</code>

<code>                            </code><code>proxy: </code><code>new</code> <code>Ext.data.HttpProxy({</code>

<code>                                 </code><code>url: window.webRoot + </code><code>'rest/qaitem/'</code><code>,</code>

<code>                                 </code><code>method: </code><code>'GET'</code>

<code>                            </code><code>}),</code>

<code>                            </code><code>sortInfo:{field: </code><code>'itemname'</code><code>, direction: </code><code>"ASC"</code><code>},</code>

<code>                            </code><code>groupField:</code><code>'groupname'</code>

<code>                    </code><code>});</code>

<code>                    </code><code>var</code> <code>sm = </code><code>new</code> <code>Ext.grid.CheckboxSelectionModel();</code>

<code>                    </code><code>/** 设置次数</code>

<code>                    </code><code>setNumber = function(v){</code>

<code>                        </code><code>console.info(v);</code>

<code>                        </code><code>var record = sm.getSelected();</code>

<code>                        </code><code>record.set('isNumber',v);</code>

<code>                    </code><code>}</code>

<code>                     </code><code>*/</code>

<code>                    </code><code>var</code> <code>grid = </code><code>new</code> <code>xg.EditorGridPanel({</code>

<code>                        </code><code>store: store,</code>

<code>                        </code><code>clicksToEdit: 1,</code>

<code>                        </code><code>stripeRows:</code><code>true</code><code>,</code>

<code>                        </code><code>sm: sm,</code>

<code>                        </code><code>listeners: {</code>

<code>                            </code><code>beforeedit: </code><code>function</code><code>(e) {</code>

<code>                                </code><code>if</code> <code>(e.record.get(</code><code>"isnumber"</code><code>) == </code><code>"NO"</code><code>) {</code>

<code>                                    </code><code>return</code> <code>false</code><code>;</code>

<code>                                </code><code>}</code><code>else</code><code>{</code>

<code>                                    </code><code>return</code> <code>true</code><code>;</code>

<code>                                </code><code>}</code>

<code>                            </code><code>}</code>

<code>                        </code><code>},</code>

<code>                        </code><code>columns: [</code>

<code>                            </code><code>{id:</code><code>'itemname'</code><code>,header: </code><code>"选项组名称"</code><code>, width: 270, sortable: </code><code>true</code><code>, dataIndex: </code><code>'itemname'</code><code>},</code>

<code>                            </code><code>{header: </code><code>"次数"</code><code>, width: 30, sortable: </code><code>true</code><code>, dataIndex: </code><code>'isnumber'</code><code>,</code>

<code>                                </code><code>editor: </code><code>new</code> <code>Ext.form.NumberField(),</code>

<code>                                </code><code>renderer: </code><code>function</code><code>(v,m,r){</code>

<code>                                    </code><code>return</code> <code>v; </code>

<code>                                    </code><code>/*</code>

<code>                                    </code><code>if(v =="YES"){</code>

<code>                                        </code><code>var showv = (r.data.isnumber=="YES"?'' : r.data.isNumber);</code>

<code>                                        </code><code>return  r.data.isNumber;//"&lt;input type='text' value = '"+showv+"' size='7' onkeyup ='setNumber(this.value)' /&gt;";</code>

<code>                                    </code><code>}else if(v=="NO"){</code>

<code>                                        </code><code>return "不存在次数";</code>

<code>                                    </code><code>}else{</code>

<code>                                        </code><code>return "数据读取失败";</code>

<code>                                    </code><code>}</code>

<code>                                    </code><code>*/</code>

<code>                            </code><code>{dataIndex: </code><code>'groupid'</code><code>,hidden:</code><code>true</code><code>},</code>

<code>                            </code><code>{dataIndex: </code><code>'itemid'</code><code>,hidden:</code><code>true</code><code>},</code>

<code>                            </code><code>{dataIndex: </code><code>'itemgroupid'</code><code>,hidden:</code><code>true</code><code>},</code>

<code>                            </code><code>{dataIndex:</code><code>'status'</code><code>,hidden:</code><code>true</code><code>},</code>

<code>                            </code><code>{header:</code><code>'分值'</code><code>, width:20, sortable:</code><code>true</code><code>, dataIndex: </code><code>'itemvalue'</code><code>,</code>

<code>//                                  m.css='x-grid-bak-blue';</code>

<code>                                    </code><code>var</code> <code>str = </code><code>"&lt;a href='javascript:void(0);'&gt;"</code><code>+v+</code><code>"&lt;/a&gt;"</code><code>;</code>

<code>                                    </code><code>var</code> <code>str1 = </code><code>"&lt;a href='javascript:void(0);'&gt;取消&lt;/a&gt;"</code><code>;</code>

<code>                                    </code><code>if</code><code>(r.data.isnumber != </code><code>"NO"</code> <code>){</code>

<code>                                        </code><code>return</code> <code>v;</code>

<code>                                    </code><code>return</code> <code>!r.data.status?str : str1;</code>

<code>                            </code><code>{header: </code><code>"评分选项组"</code><code>, width: 30, sortable: </code><code>true</code><code>, dataIndex: </code><code>'groupname'</code><code>}</code>

<code>                        </code><code>],</code>

<code>                        </code><code>view: </code><code>new</code> <code>Ext.grid.GroupingView({</code>

<code>                            </code><code>forceFit:</code><code>true</code><code>,</code>

<code>                            </code><code>groupTextTpl: </code><code>'{text} ({[values.rs.length]} {[values.rs.length &gt; 1 ? "项" : "个"]})'</code>

<code>                        </code><code>}),</code>

<code>                        </code><code>frame:</code><code>true</code><code>,</code>

<code>                        </code><code>loadMask:</code><code>true</code><code>,</code>

<code>                        </code><code>layout: </code><code>'fit'</code><code>,</code>

<code>                        </code><code>width: 950,</code>

<code>                        </code><code>height: 450</code>

<code>                                    </code> 

<code>                    </code><code>points = </code><code>function</code><code>(is){</code>

<code>                        </code><code>var</code> <code>r = sm.getSelected();</code>

<code>                        </code><code>if</code><code>(r.data.isnumber != </code><code>"NO"</code><code>){</code>

<code>                            </code><code>//转换成int操作  次数和是否扣分了</code>

<code>                                            </code> 

<code>                        </code><code>}</code>

<code>                        </code><code>r.set(</code><code>'fenshu'</code><code>, r.data.itemvalue);</code>

<code>                        </code><code>r.set(</code><code>'status'</code><code>,!is);</code>

<code>                        </code><code>r.commit();</code>

<code>                    </code><code>var</code> <code>win = </code><code>new</code> <code>Ext.Window({</code>

<code>                        </code><code>title:</code><code>'质检评分'</code><code>,</code>

<code>                        </code><code>width:955,</code>

<code>                        </code><code>height:515,</code>

<code>                        </code><code>region:</code><code>'center'</code><code>,</code>

<code>                        </code><code>iconCls: </code><code>'gradebtn'</code><code>,</code>

<code>                        </code><code>resizable:</code><code>true</code><code>, </code>

<code>                        </code><code>modal:</code><code>true</code><code>,</code>

<code>                        </code><code>closeAction:</code><code>'hide'</code><code>,</code>

<code>                        </code><code>items:[grid],</code>

<code>                        </code><code>buttons:[{</code>

<code>                            </code><code>text:</code><code>'保存'</code><code>,</code>

<code>                            </code><code>listeners : {</code>

<code>                                </code><code>'click'</code> <code>: </code><code>function</code><code>() {</code>

<code>                                    </code><code>var</code> <code>fenshu = </code><code>''</code><code>,itemname =</code><code>''</code><code>;</code>

<code>                                    </code><code>var</code> <code>status = </code><code>''</code><code>,itemgroupid =</code><code>''</code><code>;</code>

<code>                                    </code><code>var</code> <code>isNumber = </code><code>''</code><code>,itemid=</code><code>''</code><code>;</code>

<code>                                    </code><code>var</code> <code>groupid = </code><code>''</code><code>,grouptypeid=</code><code>''</code><code>,groupname=</code><code>''</code><code>;</code>

<code>                                    </code><code>for</code> <code>(</code><code>var</code> <code>i = 0; i&lt;store.data.items.length; i++) {</code>

<code>                                        </code><code>var</code> <code>rco = store.getAt(i);</code>

<code>                                        </code><code>if</code><code>(i==store.data.items.length-1){</code>

<code>                                            </code><code>fenshu +=rco.get(</code><code>'itemvalue'</code><code>);</code>

<code>                                            </code><code>status += rco.get(</code><code>'status'</code><code>);</code>

<code>                                            </code><code>groupid += rco.get(</code><code>'groupid'</code><code>);</code>

<code>                                            </code><code>groupname += rco.get(</code><code>'groupname'</code><code>);</code>

<code>                                            </code><code>itemid += rco.get(</code><code>'itemid'</code><code>);</code>

<code>                                            </code><code>itemgroupid += rco.get(</code><code>'itemgroupid'</code><code>);</code>

<code>                                            </code><code>itemname += rco.get(</code><code>'itemname'</code><code>);</code>

<code>                                            </code><code>if</code><code>(rco.get(</code><code>'isnumber'</code><code>)==</code><code>'YES'</code><code>||rco.get(</code><code>'isnumber'</code><code>)==</code><code>'NO'</code><code>||rco.get(</code><code>'isnumber'</code><code>)==</code><code>''</code><code>){</code>

<code>                                                </code><code>isNumber += </code><code>'0'</code><code>;</code>

<code>                                            </code><code>}</code><code>else</code><code>{</code>

<code>                                                </code><code>isNumber += rco.get(</code><code>'isnumber'</code><code>)+</code><code>''</code><code>;</code>

<code>                                            </code><code>}</code>

<code>                                        </code><code>}</code><code>else</code><code>{</code>

<code>                                            </code><code>fenshu +=rco.get(</code><code>'itemvalue'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>status += rco.get(</code><code>'status'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>groupid += rco.get(</code><code>'groupid'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>groupname += rco.get(</code><code>'groupname'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>itemid += rco.get(</code><code>'itemid'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>itemgroupid += rco.get(</code><code>'itemgroupid'</code><code>)+</code><code>','</code><code>;</code>

<code>                                            </code><code>itemname += rco.get(</code><code>'itemname'</code><code>)+</code><code>','</code><code>;</code>

<code>                                                </code><code>isNumber += </code><code>'0,'</code><code>;</code>

<code>                                                </code><code>isNumber += rco.get(</code><code>'isnumber'</code><code>)+</code><code>','</code><code>;</code>

<code>                                        </code><code>}</code>

<code>                                    </code><code>Ext.Ajax.request({</code>

<code>                                        </code><code>url : window.webRoot + </code><code>'rest/qaitemscore/'</code><code>,</code>

<code>                                        </code><code>params: {</code>

<code>                                                </code><code>userId:</code><code>'&lt;%=userId%&gt;'</code><code>,</code>

<code>                                                </code><code>recordId:rec.get(</code><code>'id'</code><code>),</code>

<code>                                                </code><code>ani:rec.get(</code><code>'ani'</code><code>),</code>

<code>                                                </code><code>dnis:rec.get(</code><code>'dnis'</code><code>),</code>

<code>                                                </code><code>callType:rec.get(</code><code>'callType'</code><code>),</code>

<code>                                                </code><code>begintime:formatDateTime(rec.get(</code><code>'beginTime'</code><code>)),</code>

<code>                                                </code><code>endtime:formatDateTime(rec.get(</code><code>'endTime'</code><code>)),</code>

<code>                                                </code><code>length:rec.get(</code><code>'callTime'</code><code>),</code>

<code>                                                </code><code>extno:rec.get(</code><code>'extNo'</code><code>),</code>

<code>                                                </code><code>fileName:rec.get(</code><code>'fileName'</code><code>),</code>

<code>                                                </code><code>agentNo:rec.get(</code><code>'agentNo'</code><code>),</code>

<code>                                                </code><code>itemvalue: fenshu,</code>

<code>                                                </code><code>status: status,</code>

<code>                                                </code><code>isNumber: isNumber,</code>

<code>                                                </code><code>groupid: groupid,</code>

<code>                                                </code><code>grouptypeid: grouptypeid,</code>

<code>                                                </code><code>groupname: groupname,</code>

<code>                                                </code><code>itemid: itemid,</code>

<code>                                                </code><code>itemgroupid: itemgroupid,</code>

<code>                                                </code><code>itemname: itemname,</code>

<code>                                                </code><code>callId: rec.get(</code><code>'callId'</code><code>),</code>

<code>                                                </code><code>assigenederid: rec.get(</code><code>'assigeneder'</code><code>)</code>

<code>                                                </code><code>},</code>

<code>                                        </code><code>success: </code><code>function</code><code>(res) {</code>

<code>                                            </code><code>myMask.hide();</code>

<code>                                            </code><code>var</code> <code>respText = Ext.decode(res.responseText); </code>

<code>                                            </code><code>if</code><code>(respText.code == </code><code>'OK'</code><code>) {</code>

<code>                                                </code><code>Ext.Msg.alert(</code><code>'系统提示'</code><code>, </code><code>'评分成功'</code><code>);</code>

<code>                                                </code><code>close();</code>

<code>                                            </code><code>} </code><code>else</code> <code>{</code>

<code>                                                </code><code>Ext.Msg.alert(</code><code>'保存失败'</code><code>, respText.message + </code><code>"（"</code> <code>+ respText.code + </code><code>"）"</code><code>);</code>

<code>                                        </code><code>},</code>

<code>                                        </code><code>failure: </code><code>function</code><code>(res) {</code>

<code>                                            </code><code>var</code> <code>respText = Ext.decode(res.responseText);</code>

<code>                                            </code><code>Ext.Msg.alert(</code><code>'保存失败'</code><code>, respText.message + </code><code>"（"</code> <code>+ respText.code + </code><code>"）"</code><code>);</code>

<code>                                        </code><code>method: </code><code>'POST'</code>

<code>                                    </code><code>});</code>

<code>                                </code><code>}  </code>

<code>                        </code><code>},{</code>

<code>                            </code><code>text:</code><code>'取消'</code><code>,</code>

<code>                            </code><code>listeners : {  </code>

<code>                                    </code><code>close();</code>

<code>                        </code><code>}]</code>

<code>                    </code><code>}).show();</code>

<code>                    </code><code>var</code> <code>close=</code><code>function</code><code>(){</code>

<code>                        </code><code>win.hide();</code>

<code>                </code><code>}</code>

<code>            </code><code>}</code>

<code>        </code><code>}</code>

<code>    </code><code>);</code>

面的是不是觉得有点复杂了？额。。我的错，下面来看个简单的：

这个就简单许多啦，看下主要代码，相信聪明的你一定能明白：

<code>var</code> <code>columns = [</code>

<code>               </code><code>{header:</code><code>'编号'</code><code>,dataIndex:</code><code>'id'</code><code>},</code>

<code>               </code><code>{header:</code><code>'性别'</code><code>,dataIndex:</code><code>'sex'</code><code>},</code>

<code>               </code><code>{header:</code><code>'名称'</code><code>,dataIndex:</code><code>'name'</code><code>},</code>

<code>               </code><code>{header:</code><code>'描述'</code><code>,dataIndex:</code><code>'descn'</code><code>}</code>

<code>               </code><code>];</code>

<code>var</code> <code>data = [</code>

<code>            </code><code>[</code><code>'1'</code><code>,</code><code>'male'</code><code>,</code><code>'name1'</code><code>,</code><code>'descn1'</code><code>],</code>

<code>            </code><code>[</code><code>'2'</code><code>,</code><code>'female'</code><code>,</code><code>'name2'</code><code>,</code><code>'descn2'</code><code>],</code>

<code>            </code><code>[</code><code>'3'</code><code>,</code><code>'male'</code><code>,</code><code>'name3'</code><code>,</code><code>'descn3'</code><code>],</code>

<code>            </code><code>[</code><code>'4'</code><code>,</code><code>'female'</code><code>,</code><code>'name4'</code><code>,</code><code>'descn4'</code><code>],</code>

<code>            </code><code>[</code><code>'5'</code><code>,</code><code>'male'</code><code>,</code><code>'name5'</code><code>,</code><code>'descn5'</code><code>]</code>

<code>            </code><code>];</code>

<code>           </code> 

<code>var</code> <code>store = </code><code>new</code> <code>Ext.data.ArrayStore({</code>

<code>    </code><code>fields:[</code>

<code>            </code><code>{name:</code><code>'id'</code><code>},</code>

<code>            </code><code>{name:</code><code>'sex'</code><code>},</code>

<code>            </code><code>{name:</code><code>'name'</code><code>},</code>

<code>            </code><code>{name:</code><code>'descn'</code><code>}</code>

<code>            </code><code>],</code>

<code>    </code><code>data:data,</code>

<code>    </code><code>groupField:</code><code>'sex'</code><code>, </code><code>//确定哪一项分组</code>

<code>    </code><code>sorter:[{property:</code><code>'id'</code><code>, </code><code>//排序属性</code>

<code>        </code><code>direction:</code><code>'ASC'</code><code>} </code><code>//排序方式</code>

<code>    </code><code>]</code>

<code>});</code>

<code>var</code> <code>grid = </code><code>new</code> <code>Ext.grid.GridPanel({</code>

<code>    </code><code>autoHeight:</code><code>true</code><code>,</code>

<code>    </code><code>store:store,</code>

<code>    </code><code>columns:columns,</code>

<code>    </code><code>features:[{ftype:</code><code>'grouping'</code><code>}],</code>

<code>    </code><code>renderTo:</code><code>'grid'</code>

这里的fields和data还是原来的示例一样，主要关注的是groupField，它确定通过哪一项进行分组。store可以设置sorter参数，这个参数对应的值有2项：property是排序的属性，direction是排序的方式。我们把数据传入，输出显示的就是分成一组一组的数据。但是，如果想显示成我们期待的那种形式，还需要设置feature为grouping

另外，分组表格控件的视图是有特殊功效的，通过它可以实现分组表格专用的对应功能，如下代码所示：

<code>//分组表格视图</code>

<code>Ext.get(</code><code>'expand'</code><code>).on(</code><code>'click'</code><code>,</code><code>function</code><code>(){</code>

<code>    </code><code>grid.view.features[0].expandAll();</code>

<code>Ext.get(</code><code>'collapse'</code><code>).on(</code><code>'click'</code><code>,</code><code>function</code><code>(){</code>

<code>    </code><code>grid.view.features[0].collapseAll();</code>

<code>Ext.get(</code><code>'one'</code><code>).on(</code><code>'click'</code><code>, </code><code>function</code><code>() {</code>

<code>       </code><code>var</code> <code>feature = grid.view.features[0];</code>

<code>    </code><code>if</code> <code>(feature.isExpanded(</code><code>'female'</code><code>)) {</code>

<code>        </code><code>feature.expand(</code><code>'female'</code><code>);</code>

<code>        </code><code>feature.collapse(</code><code>'female'</code><code>);</code>

<code>    </code><code>} </code><code>else</code> <code>{</code>

<code>    </code><code>}</code>

<code>   </code><code>});</code>

当然实现上面的代码功能必须要有3个button了，每个id设置对应的点击事件，上例中expandAll()展示所有分组，collapseAll()折叠所有分组。如果想自动判断分组的状态进行对应的折叠或展开操作---当分组都已折叠时执行展开所有分组，当分组都已展开时执行折叠所有分组，这就需要我们自己写代码来判断分组的状态了。这部分还存在着一个初始化的小问题，每次虽然分组显示的都是展开，但是feature.isExpanded()返回的都是false，所以要重复调用collapse()和expand()两个函数，才能实现正常切换。

好了，现在你也来动手尝试下吧。

本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1339592，如需转载请自行联系原作者