ExtJS4.2學習(10)分組表格控件--GroupingGrid

分組表格控件在咱們的開發中常常被用到，GroupingGrid分組表格就是在普通表格的基礎上，根據某一列的數據顯示錶格中的數據分組的表格控件。舉個例子給你們，好比某些信息用樹形顯示以爲有點大才小用，樹形能夠有無限極，可是用了分組表格能夠完美的展現信息，看下圖是個人項目中用到的一個例子，將全部評分項顯示出來，而且動態獲取是否有次數，若是有次數將出現可編輯，沒有次數就不可編輯，若是須要扣分就出現連接，沒有就不出現，這正好結合了咱們前幾節學的知識，看下面的圖：

具體代碼：我這裏是在其餘組件中彈出的這個分組表格控件，因此你們看重點代碼便可，當時寫這個功能可花費了很多時間，你們好好研究哈~

    actions.push( 
        { 
            text: '評分', 
            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:'status',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){
                        console.info(v);
                        var record = sm.getSelected();
                        record.set('isNumber',v);
                    }
                     */ 
                    var grid = new xg.EditorGridPanel({ 
                        store: 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: "選項組名稱", width: 270, sortable: true, dataIndex: 'itemname'}, 
                            {header: "次數", width: 30, sortable: true, dataIndex: 'isnumber', 
                                editor: new Ext.form.NumberField(), 
                                renderer: function(v,m,r){ 
                                    return 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 "不存在次數";
                                    }else{
                                        return "數據讀取失敗";
                                    }
                                    */ 
                                } 
                            }, 
                            {dataIndex: 'groupid',hidden:true}, 
                            {dataIndex: 'itemid',hidden:true}, 
                            {dataIndex: 'itemgroupid',hidden:true}, 
                            {dataIndex:'status',hidden:true}, 
                            {header:'分值', width:20, sortable:true, dataIndex: 'itemvalue', 
                                renderer: function(v,m,r){ 
//                                  m.css='x-grid-bak-blue'; 
                                    var str = "<a href='javascript:void(0);'>"+v+"</a>"; 
                                    var str1 = "<a href='javascript:void(0);'>取消</a>"; 
                                    if(r.data.isnumber != "NO" ){ 
                                        return v; 
                                    } 
                                    return !r.data.status?str : str1; 
                                } 
                            }, 
                            {header: "評分選項組", width: 30, sortable: true, dataIndex: 'groupname'} 
                        ], 
                        view: new Ext.grid.GroupingView({ 
                            forceFit:true, 
                            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "項" : "個"]})' 
                        }), 
                        frame:true, 
                        loadMask:true, 
                        layout: 'fit', 
                        width: 950, 
                        height: 450 
                    }); 
                                    
                    points = function(is){ 
                        var r = sm.getSelected(); 
                        if(r.data.isnumber != "NO"){ 
                            //轉換成int操做  次數和是否扣分了 
                                            
                        } 
                        r.set('fenshu', r.data.itemvalue); 
                        r.set('status',!is); 
                        r.commit(); 
                    } 
                                    
                    var win = new Ext.Window({ 
                        title:'質檢評分', 
                        width:955, 
                        height:515, 
                        region:'center', 
                        iconCls: 'gradebtn', 
                        layout: 'fit', 
                        resizable:true,  
                        modal:true, 
                        closeAction:'hide', 
                        items:[grid], 
                        buttons:[{ 
                            text:'保存', 
                            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('系統提示', '評分紅功'); 
                                                close(); 
                                            } else { 
                                                Ext.Msg.alert('保存失敗', respText.message + "（" + respText.code + "）"); 
                                            } 
                                        }, 
                                        failure: function(res) { 
                                            myMask.hide(); 
                                            var respText = Ext.decode(res.responseText); 
                                            Ext.Msg.alert('保存失敗', respText.message + "（" + respText.code + "）"); 
                                        }, 
                                        method: 'POST' 
                                    }); 
                                }   
                            } 
                        },{ 
                            text:'取消', 
                            listeners : {   
                                'click' : function() { 
                                    close(); 
                                } 
                            } 
                        }] 
                    }).show(); 
                    var close=function(){ 
                        win.hide(); 
                    } 
                } 
            } 
        } 
    );

面的是否是以爲有點複雜了？額。。個人錯，下面來看個簡單的：

這個就簡單許多啦，看下主要代碼，相信聰明的你必定能明白：

var columns = [ 
               {header:'編號',dataIndex:'id'}, 
               {header:'性別',dataIndex:'sex'}, 
               {header:'名稱',dataIndex:'name'}, 
               {header:'描述',dataIndex:'descn'} 
               ]; 
var data = [ 
            ['1','male','name1','descn1'], 
            ['2','female','name2','descn2'], 
            ['3','male','name3','descn3'], 
            ['4','female','name4','descn4'], 
            ['5','male','name5','descn5'] 
            ]; 
           
var store = new Ext.data.ArrayStore({ 
    fields:[ 
            {name:'id'}, 
            {name:'sex'}, 
            {name:'name'}, 
            {name:'descn'} 
            ], 
    data:data, 
    groupField:'sex', //肯定哪一項分組 
    sorter:[{property:'id', //排序屬性 
        direction:'ASC'} //排序方式 
    ] 
}); 
           
var grid = new Ext.grid.GridPanel({ 
    autoHeight:true, 
    store:store, 
    columns:columns, 
    features:[{ftype:'grouping'}], 
    renderTo:'grid' 
});

這裏的fields和data仍是原來的示例同樣，主要關注的是groupField，它肯定經過哪一項進行分組。store能夠設置sorter參數，這個參數對應的值有2項：property是排序的屬性，direction是排序的方式。咱們把數據傳入，輸出顯示的就是分紅一組一組的數據。可是，若是想顯示成咱們期待的那種形式，還須要設置feature爲grouping
另外，分組表格控件的視圖是有特殊功效的，經過它能夠實現分組表格專用的對應功能，以下代碼所示：

//分組表格視圖 
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'); 
    } 
   });

固然實現上面的代碼功能必需要有3個button了，每一個id設置對應的點擊事件，上例中expandAll()展現全部分組，collapseAll()摺疊全部分組。若是想自動判斷分組的狀態進行對應的摺疊或展開操做---當分組都已摺疊時執行展開全部分組，當分組都已展開時執行摺疊全部分組，這就須要咱們本身寫代碼來判斷分組的狀態了。這部分還存在着一個初始化的小問題，每次雖然分組顯示的都是展開，可是feature.isExpanded()返回的都是false，因此要重複調用collapse()和expand()兩個函數，才能實現正常切換。
好了，如今你也來動手嘗試下吧。

連載中，請你們持續關注，本文出自個人我的網站思考者日記網