EXTJS4自学手册——页面控件（表格的特性）
一、分组展示
说明：通过声明grid控件的features属性，创建Ext.grid.feature.Grouping组件，实现分组展示
例子：
首先，在定义store时，声明需要分组的字段：
var store = Ext.create("Ext.data.ArrayStore", { fields: ['id', 'name', 'age', 'address'], //通过address字段分组 groupField: 'address', data: [ [1, 'aaa', '23', '江津'], [2, 'bbb', '34', '北碚'], [3, 'ccc', '33', '江津'], [4, 'ddd', '54', '杭州'], [4, 'eee', '24', '北碚'] ] });
然后，在创建表格时，声明features属性：
Ext.create('Ext.grid.Panel', {
title: '学习grid控件',
store: store,
forceFit: true,
renderTo: Ext.getBody(),
//声明分组展示
features: [Ext.create('Ext.grid.feature.Grouping', {
//组名
groupHeaderTpl: '{name}({rows.length})'
})],
columns: [{
text: '姓名', dataIndex: 'name'
}, {
text: '年龄', dataIndex: 'age'
}]
});
执行结果：
二、分组展示时为特定字段加上摘要信息
说明：通过groupingsummary组件实现
首先，定义store，声明分组字段：
var store = Ext.create("Ext.data.ArrayStore", { fields: ['id', 'name', 'age', 'address'], //通过address字段分组 groupField: 'address', data: [ [1, 'aaa', '23', '江津'], [2, 'bbb', '34', '北碚'], [3, 'ccc', '33', '江津'], [4, 'ddd', '54', '杭州'], [4, 'eee', '24', '北碚'] ] });
然后，然后在声明grid字段的时候，声明features特性，并在特定字段加上摘要信息
Ext.create('Ext.grid.Panel', {
title: '学习grid控件',
store: store,
forceFit: true,
renderTo: Ext.getBody(),
//声明分组展示
features: {
groupHeaderTpl: ' {name}',
ftype: 'groupingsummary'
},
columns: [{
text: '姓名', dataIndex: 'name',
//统计人数
summaryType: 'count',
//显示类容
summaryRenderer: function(value){
return Ext.String.format('{0} people{1}',
value, value !== 1 ? 's' : '');
}
}, {
text: '年龄', dataIndex: 'age'
}]
});
执行结果：
三、为表格的特定列增加摘要
说明：通过summary特性实现
首先，定义store：
var store = Ext.create("Ext.data.ArrayStore", { fields: ['id', 'name', 'age', 'address'], data: [ [1, 'aaa', '23', '江津'], [2, 'bbb', '34', '北碚'], [3, 'ccc', '33', '江津'], [4, 'ddd', '54', '杭州'], [4, 'eee', '24', '北碚'] ] });
然后，声明表格的features属性
Ext.create('Ext.grid.Panel', {
title: '学习grid控件',
store: store,
forceFit: true,
renderTo: Ext.getBody(),
//声明分组展示
features: {
ftype: 'summary'
},
columns: [{
text: '姓名', dataIndex: 'name',
//统计人数
summaryType: 'count',
//显示类容
summaryRenderer: function(value){
return Ext.String.format('{0} people{1}',
value, value !== 1 ? 's' : '');
}
}, {
text: '年龄', dataIndex: 'age'
}]
});
执行结果：
四、为表格的每一行新增说明
说明：通过rowwrap特性实现
首先，定义store：
var store = Ext.create("Ext.data.ArrayStore", { fields: ['id', 'name', 'age', 'address'], data: [ [1, 'aaa', '23', '江津'], [2, 'bbb', '34', '北碚'], [3, 'ccc', '33', '江津'], [4, 'ddd', '54', '杭州'], [4, 'eee', '24', '北碚'] ] });
然后，声明表格的features特性
Ext.create('Ext.grid.Panel', {
title: '学习grid控件',
store: store,
forceFit: true,
renderTo: Ext.getBody(),
//声明特性
features: [{
ftype: 'rowbody',
getAdditionalData: function (data, idx, record, orig) {
return {
rowBody: Ext.String.format(
'<div>->姓名:<span> {0}</span></div>',
data.name)
};
}
}
],
columns: [{
text: '姓名', dataIndex: 'name'
}, {
text: '年龄', dataIndex: 'age'
}]
});
执行结果：
