ExtJS4.2 Learning (10) Grouping table control -- GroupingGrid

The group table control is often used in our development. The GroupingGrid group table is a table control that displays data groups in a table based on the data of a certain column on the basis of a common table. For example, if some information is displayed in a tree, it may be a little too small. The tree can have an infinite number, but the group table can perfectly display the information, this is an example used in my project. All the score items are displayed and the number of times is obtained dynamically. If the number of times is editable, the score cannot be edited, if you need to deduct points, the link will appear, and the link will not appear. This combines the knowledge we learned in the previous sections and looks at the figure below:
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/121T31007-0.jpg "border =" 0 "width =" 720 "style =" margin: 0px; padding: 0px; border: medium none; line-height: 22.390625px; font-family: '', arial, helvetica, 'san-serif'; font-size: 14px; background-color: # ffffff; "alt =" e3928013ae22ce03d29dee09a5901d03.jpg "/>
Code details: Here is the group table control popped up in other components, so you can focus on the code. It took a lot of time to write this function ~

Actions. push ({text: 'rating', iconCls: 'gradebtn ', listeners: {'click': function () {var xg = Ext. grid; var store = new Ext. data. groupingStore ({autoLoad: true, reader: new Ext. data. jsonReader ({root: 'data', totalProperty: 'Total', remoteSort: true}, [{name: 'groupid'}, {name: 'groupname'}, {name: 'itemid'}, {name: 'itemgroupid'}, {name: 'itemname'}, {name: 'itemvalue'}, {name: 'isnumber'}, {name: 'statu S ', type: 'boolean'}, {name: 'desc'}]), proxy: new Ext. data. httpProxy ({url: window. webRoot + 'rest/qaitem/', method: 'get'}), sortInfo: {field: 'itemname', direction: "ASC"}, groupField: 'groupname'}); var sm = new Ext. grid. checkboxSelectionModel ();/** setNumber = function (v) {lele.info (v); var record = sm. getSelected (); record. set ('isnumber', v);} */var grid = new xg. editorGridPanel ({s Tore: store, clicksToEdit: 1, stripeRows: true, sm: sm, listeners: {beforeedit: function (e) {if (e. record. get ("isnumber") = "NO") {return false;} else {return true ;}}, columns: [{id: 'itemname', header: "comment group name", width: 270, sortable: true, dataIndex: 'itemname'}, {header: "Times", width: 30, sortable: true, dataIndex: 'isnumber', editor: new Ext. form. numberField (), renderer: function (v, m, r) {re Turn v;/* if (v = "YES") {var showv = (r. data. isnumber = "YES "? '': R. data. isNumber); return r. data. isNumber; // "<input type = 'text' value = '" + showv + "'size = '7' onkeyup = 'setnumber (this. value) '/> ";} else if (v =" NO ") {return" nonexistent times ";} else {return" data read failed ";} */}},{ dataIndex: 'groupid', hidden: true}, {dataIndex: 'itemid', hidden: true}, {dataIndex: 'itemgroupid', hidden: true}, {dataIndex: 'status', hidden: true}, {header: 'value', width: 20, sortable: true, dataIndex: 'I Temvalue', renderer: function (v, m, r) {// m.css = 'x-grid-bak-Blue '; var str = "<a href = \ '# \'"/a> "; var str1 =" <a href = \ '# \' "/a> "; if (r. data. isnumber! = "NO") {return v;} return! R. data. status? Str: str1 ;},{ header: "rating option group", width: 30, sortable: true, dataIndex: 'groupname'}], view: new Ext. grid. groupingView ({forceFit: true, groupTextTpl: '{text} ({[values. rs. length]} {[values. rs. length> 1? "Item": "items"]}) '}), frame: true, loadMask: true, layout: 'fit', width: 950, height: 450 }); points = function (is) {var r = sm. getSelected (); if (r. data. isnumber! = "NO") {// Number of converted int operations and points deducted} r. set ('fenshu', r. data. itemvalue); r. set ('status ',! Is); r. commit ();} var win = new Ext. window ({title: 'qc rating', width: 955, height: 515, region: 'center', iconCls: 'gradebtn ', layout: 'fit', resizable: true, modal: true, closeAction: 'hide ', items: [grid], buttons: [{text: 'save', listeners: {'click': function () {var fenshu = '', itemname =''; var status = '', itemgroupid =''; var isNumber = '', itemid =''; var groupid = '', grouptypeid = '', groupname =''; for (var I = 0; I <store. data. items. length; I ++) {var rco = store. getAt (I); if (I = store. data. items. length-1) {fenshu + = rco. get ('itemvalue'); status + = rco. get ('status'); groupid + = rco. get ('groupid'); groupname + = rco. get ('groupname'); itemid + = rco. get ('itemid'); itemgroupid + = rco. get ('itemgroupid'); itemname + = rco. get ('itemname'); if (rco. get ('isnumber') = 'yes' | rco. get ('isnumber') = 'no' | rco. get ('isnumber') = '') {isnumber + = '0';} else {isNumber + = rco. get ('isnumber') + '';} else {fenshu + = rco. get ('itemvalue') + ','; status + = rco. get ('status') + ','; groupid + = rco. get ('groupid') + ','; groupname + = rco. get ('groupname') + ','; itemid + = rco. get ('itemid') + ','; itemgroupid + = rco. get ('itemgroupid') + ','; itemname + = rco. get ('itemname') + ','; if (rco. get ('isnumber') = 'yes' | rco. get ('isnumber') = 'no' | rco. get ('isnumber') = '') {isnumber + = '0, ';} else {isNumber + = rco. get ('isnumber') + ',' ;}} Ext. ajax. request ({url: window. webRoot + 'rest/qaitemscore/', params: {userId:' <% = userId %> ', recordId: rec. get ('id'), ani: rec. get ('ani '), dnis: rec. get ('dnis '), callType: rec. get ('calltype'), begintime: formatDateTime (rec. get ('begintime'), endtime: formatDateTime (rec. get ('endtime'), length: rec. get ('calltime'), extno: rec. get ('extno'), fileName: rec. get ('filename'), agentNo: rec. get ('agentno'), itemvalue: fenshu, status: status, isNumber: isNumber, groupid: groupid, grouptypeid: grouptypeid, groupname: groupname, itemid: itemid, itemgroupid: itemgroupid, itemname: itemname, callId: rec. get ('callid'), assigenederid: rec. get ('assigeneder ')}, success: function (res) {myMask. hide (); var respText = Ext. decode (res. responseText); if (respText. code = 'OK') {Ext. msg. alert ('System prompt ', 'score successful'); close ();} else {Ext. msg. alert ('failed to save ', respText. message + "" + respText. code + ")") ;}}, failure: function (res) {myMask. hide (); var respText = Ext. decode (res. responseText); Ext. msg. alert ('failed to save ', respText. message + "" + respText. code + ")") ;}, method: 'post'}) ;}}, {text: 'cancel', listeners: {'click': function () {close () ;}}]}). show (); var close = function () {win. hide ();}}}});

Is it a bit complicated? .. My fault. Here is a simple example:
650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/121T33592-1.jpg "border =" 0 "style =" margin: 0px; padding: 0px; border: medium none; line-height: 22.390625px; font-family: ' ', arial, helvetica, 'san-serif'; font-size: 14px; background-color: # ffffff; "alt =" inherit "/>
This is much simpler. Let's look at the main code. I believe that you can understand the following:

Var columns = [{header: 'number', dataIndex: 'id'}, {header: 'gender ', dataIndex: 'sex'}, {header: 'name ', dataIndex: 'name'}, {header: 'description', dataIndex: 'desc'}]; var data = [['1', 'male', 'name1 ', 'desc1'], ['2', 'female', 'name2', 'desc2'], ['3', 'male', 'name3 ', 'desc3'], ['4', 'female ', 'name4', 'scn4'], ['5', 'male', 'name5 ', 'desc5']; var store = new Ext. data. arrayStore ({fields: [{name: 'id'}, {name: 'sex'}, {name: 'name'}, {name: 'desc'}], data: data, groupField: 'sex', // determine which group sorter: [{property: 'id', // sort attribute direction: 'asc '} // sorting method]}); var grid = new Ext. grid. gridPanel ({autoHeight: true, store: store, columns: columns, features: [{ftype: 'grouping'}], renderTo: 'grid '});

Here, fields and data are the same as the original example. The main concern is groupField, which determines which item is used for grouping. Store can set the sorter parameter, which corresponds to two items: property is the sorting attribute, and direction is the sorting method. We pass in the data, and the output shows data in a group. However, if you want to display it in the expected format, you also need to set feature to grouping.
In addition, the view of the grouping table control has special functions. You can use it to implement the corresponding function for grouping tables, as shown in the following code:

// Group table view Ext. get ('expand '). on ('click', function () {grid. view. features [0]. expandAll () ;}); Ext. get ('collapse '). on ('click', function () {grid. view. features [0]. collapseAll () ;}); Ext. get ('one '). on ('click', function () {var feature = grid. view. features [0]; if (feature. isExpanded ('female ') {feature. expand ('female '); feature. collapse ('female');} else {feature. collapse ('female '); feature. expand ('female ');}});

Of course, the code above must have three buttons. Each id must set the corresponding click event. In the above example, expandAll () shows all groups, and collapseAll () folds all groups. If you want to automatically determine the status of the group for the corresponding fold or expand operation-when the group is collapsed, execute to expand all groups, when the group is expanded, execute to fold all groups, therefore, we need to write code to determine the group status. This part still has a small initialization problem. Although each group shows expansion, the feature. isExpanded () returns false, so you must call the collapse () and expand () functions repeatedly to achieve normal switching.
Now, let's try again.

During the serialization, please keep an eye on it. This article is from my personal website thinker's diary.

This article is from the "On My Way" blog, please be sure to keep this source http://shuyangyang.blog.51cto.com/1685768/1339592