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);     
        }
    }
});