首页 > 代码库 > Ext.grid.GroupingView 分组显示

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 : ‘&nbsp;&nbsp;查&nbsp;&nbsp;&nbsp;&nbsp;询&nbsp;&nbsp;&nbsp;&nbsp;‘,        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 : "&nbsp;立&nbsp;即&nbsp;冻&nbsp;结&nbsp;"//,                              //listeners : {                                  //check : radiochange                              //}                                                     }),                  new Ext.form.Radio({                            id:"lxdj_radio",                              name : "dj_method",                              inputValue : "lxdj",                            boxLabel : "&nbsp;联&nbsp;系&nbsp;冻&nbsp;结&nbsp;"//,                              //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);             }    }});

 

Ext.grid.GroupingView 分组显示