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