grid GroupingStore

Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';
Ext.QuickTips.init();
// Ext.form.Field.prototype.msgTarget = 'side';


/**
* 生成多选框模型
*/
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template('<b class="wttext">邮件主题:</b><p>{mailSubject}</p><b class="wttext">邮件正文:</b><p>{mailBody}</p>')
});
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([expander,new Ext.grid.RowNumberer(),
sm, {
header : '发件人',
dataIndex : 'mailFrom',
width : 40,
sortable : true
}, {
header : '日期',
dataIndex : 'mailDate',
width : 15,
sortable : true
}, {
header : '时间',
dataIndex : 'mailTime',
width : 15,
sortable : true
}, {
header : '大小',
dataIndex : 'mailSize',
width : 15,
sortable : true
}, {
header : '邮件主题',
dataIndex : 'mailSubject',
sortable : true
}]);
//cm.defaultSortable = true;
var ds = new Ext.data.GroupingStore({
proxy : new Ext.data.HttpProxy({
url : '../../mail.do?method=listMail&type=inbox'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root'
}, [{
name : 'mailFrom',
mapping : 'mailFrom'
},{
name : 'mailDate',
mapping : 'mailDate'
},{
name : 'mailTime',
mapping : 'mailTime'
},{
name : 'mailSize',
mapping : 'mailSize'
},{
name : 'mailSubject',
mapping : 'mailSubject'
},{
name : 'mailBody',
mapping : 'mailBody'
}]),
sortInfo:{field: 'mailDate', direction: "DESC"},
groupField : 'mailDate',
groupOnSort : true
});

var bbar = new Ext.PagingToolbar({
pageSize : 30,
store : ds,
displayInfo : true
});
/* var bookTplMarkup = [
'发件人: {mailFrom}<br/>',
'日期: {mailDate}<br/>',
'主题: {mailSubject}<br/>',
'正文: {mailBody}<br/>'
];
var bookTpl = new Ext.Template(bookTplMarkup);*/
var grid = new Ext.grid.GridPanel({
//title : '邮件列表',
trackMouseOver : true,// 鼠标经过效果
stripeRows : true,// 行颜色交叉显示
height:650,
loadMask : {
msg : '正在加载信息，请稍候...'
},
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]}封邮件)'
}),
ds : ds,
cm : cm,
sm : sm,
plugins : expander,
bbar : bbar
});
/* grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
var detailPanel = Ext.getCmp('detailPanel');
bookTpl.overwrite(detailPanel.body, r.data);
});
var panel = new Ext.FormPanel({
items : [grid, {
id : 'detailPanel',
//region : 'center',
hight : 94,
bodyStyle: 'padding: 10px; font-family: Arial; font-size: 12px;',
html : '提示：请选择邮件在这里预览。'
}]
});*/
var viewport = new Ext.Viewport({
region : 'center',
layout : 'fit', // 使panel能根据浏览器窗口大小自动调整
items : [grid]
});
/**
* 将Grid渲染呈现
*/
grid.render(document.body);
ds.load({
params : {
start : 0,
limit : 30
}
});

});