Ext.grid.GroupingView 分組顯示

1、Ext.grid.GroupingView
 主要配置項：
            enableGroupingMenu：是否在表頭菜單中進行分組控制，默認為true
            groupByText：表頭菜單中分組控制的菜單文字，默認為'Group By This Field'
  
            enableNoGroups：是否允許用戶關閉分組功能，默認為true
            showGroupsText：在表頭菜單中啟用分組和禁用分組的菜單文字，默認為'Show in Groups'
  
            groupTextTpl：用於渲染分組信息的模板，默認為'{text}'，常用的可選值有：
                  text：列標題:組字段值
                  gvalue：組字段的值
                  startRow：組行索引
  
            enableGrouping：是否對數據分組，默認為true
            hideGroupedColumn：是否隱藏分組列，默認為false
            ignoreAdd：在向表格中添加數據時是否刷新表格，默認為false
            showGroupName：是否在分組行上顯示分組字段的名字，默認為true
            startCollapsed：初次顯示時分組是否處於收縮狀態，默認為false
  
      主要方法：
            collapseAllGroups()：收縮所有分組行
            expandAllGroups()：展開所有分組行
            getGroupId( String value )：根據分組字段值取得組id
            toggleAllGroups( [Boolean expanded] )：切換所有分組行的展開或收縮狀態
            toggleGroup( String groupId, [Boolean expanded] )：切換指定分組行的展開或收縮狀態

 

 

2、Ext.data.GroupingStore
      groupField：分組字段
 
      groupOnSort：是否在分組字段上排序，默認為false
      remoteGroup：是否遠程分組數據，默認為false。如果是遠程分組數據，則通過groupBy參數發送分組字段名

viewConfig: {
            forceFit:true,//當行大小變化時始終填充滿
            enableRowBody:true,//可以用兩行tr來表示一行數據
            showPreview:true,//初始顯示預覽效果,這個是自定義的屬性
            getRowClass : function(record, rowIndex, p, store){//CSS class name to add to the row.獲得一行的css樣式
                if(this.showPreview){
                    p.body = '<p>'+record.data.excerpt+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        }, 

 

 

// GRID定義
var gridXtcpyy = new Ext.grid.GridPanel({
    id : 'xtcpyy_grid',
    title : '[信托產品預約]管理',
    //height : 400,
    height : '100%',
    width:'100%',
    stripeRows : true,
    bodyStyle : 'width:100%',
    disableSelection : true,
    cm : colQd,
    viewConfig : {
        forceFit : false
    },
    view: new Ext.grid.GroupingView({
       //forceFit:false,
       startCollapsed:false,
        groupTextTpl: '{text}({[values.rs.length]}{["條數據"]})'
    }),
    store : storeXtcpyy,
    iconCls : 'details',
    animCollapse : true,
    trackMouseOver : false,
    loadMask : {
        msg : '正在加載[信托產品預約信息]，請稍侯……'
    },
    selModel : smQd,
    tbar : ['-', new Ext.form.Label({
        text : '產品代碼:'
    }), cpdmBox, '-', new Ext.form.Label({
        text : '排序方式:'
    }), orderBox,'-', {
        pressed : true,
        text : '  查    詢    ',
        iconCls : 'yes',
        handler : selinfo
    },'-',new Ext.Toolbar.Fill(),'-',new Ext.form.Label({
        text : '凍 結 方 式: '
    }),new Ext.form.Radio({
                            id:"ljdj_radio",  
                            name : "dj_method",  
                            inputValue : "ljdj",
                            checked : true,    
                            boxLabel : " 立 即 凍 結 "//,  
                            //listeners : {  
                                //check : radiochange  
                            //}  
                           
                        }),  
                new Ext.form.Radio({
                            id:"lxdj_radio",  
                            name : "dj_method",  
                            inputValue : "lxdj",
                            boxLabel : " 聯 系 凍 結 "//,  
                            //listeners : {  
                                //check : radiochange  
                            //}  
                        }),'-'],
    bbar : new Ext.PagingToolbar({
        pageSize : 50,
        store : storeXtcpyy,
        displayInfo : true,
        emptyMsg : '沒有記錄'
    }),
    listeners : {
         //將第二個bar渲染到tbar裏面，通過listeners事件   
        'render' : function() {  
           //tbar2.render(this.tbar);
           bbar2.render(this.bbar);
           bbar3.render(this.bbar);     
        }
    }
});