Ext.onReady(function () {
Ext.define('personInfo', {
extend: 'Ext.data.Model',
fields: ['name', 'salary', 'country']
});
var datas = [//memory类型的Proxy中有一个配置项data，对应的值是可选的纪录的数组，用数组定义一条纪录中的各个item
['刘一', 2500, 'China'],//因此就是利用了二维数组来定义。JS中定义数组有两种方式，利用Array定义和字面值定义，字面值
['黄小珠', 1500, 'China'],//即是利用[]来定义数组变量值与Object变量的定义方式利用{}来定义是不同的。
['李凡达', 2000, 'USA'],
['柳小刀', 3000, 'India'],//
['杨宇', 2000, 'French']//
];
var firstStore = Ext.create('Ext.data.Store', {
storeId: 'store1',
groupField: 'country',
model: 'personInfo',
proxy: {
type: 'memory',
data: datas,
reader: 'array'
},
autoLoad: true
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
400,
height: 400,
title: '表格分组汇总特性',
frame: true,
store: Ext.data.StoreManager.lookup("store1"),
// selModel: { selType: 'checkboxmodel' },
//multiSelect: true,
tbar: [
{
text: '表格分组汇总特性',
handler: function () {
var msg = '';
var msg1 = { hobby: "fish" };
var rows = grid.getSelectionModel().getSelection();//返回值是Ext.data.Model[]
for (var i = 0; i < rows.length; i++) {
msg = msg + rows[i].get('name') + '
';//rows[i]是某条记录,利用Model的get函数取出记录中
}//指定字段的值。
//alert(msg);
}
}],
features: [Ext.create('Ext.grid.feature.GroupingSummary', {
groupByText: '用本字段分组', showGroupsText: '显示分组',
groupHeaderTpl: '国籍:{name} ({rows.length})', startCollapsed: true//设置初始渲染页面时收缩分组
//groupHeaderTpl中[name}即是分组根据字段名。rows.length就是每个分组中记录个数
})],
columns: [
{
header: '姓名', dataIndex: 'name', 100, sortable: true,summaryType:'count',
summaryRenderer: function (value) { return "人数为："+value}
},
{
header: '薪资', dataIndex: 'salary', flex: 1, summaryType: 'average',
summaryRenderer: function (value) { return "平均工资是:"+value}
},
{ header: '国籍', dataIndex: 'country', flex: 1 }
]
});
});