首页 > 代码库 > 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 : ‘ 查 询 ‘, 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); } }});
Ext.grid.GroupingView 分组显示