Ext.grid.feature.Feature是一类针对Ext.grid.Panel 的特殊插件,提供了可以被扩展的基本模板方法。子类包括:
1、Ext.grid.feature.RowBody 表格行体
行体特性为表格追加了tr标签,跨越了原始表格的所有列,在表格中展示一些描述性的特殊信息时非常有用,行体在默认状态下是隐藏的,如果需要展示行体必须覆盖getAdditionalData方法,代码如下:
//Ext.grid.feature.RowBody示例
Ext.onReady(function ()
{
//创建表格数据
var datas = [
["张三", 2500, "张三的个人简历……"],
["李四", 1500, "李四的个人简历……"],
["王五", 3500, "王五的个人简历……"],
["钱六", 4000, "钱六的个人简历……"]
];
//创建grid表格组件
//创建Grid表格组件
Ext.create('Ext.grid.Panel', {
title: 'Ext.grid.feature.RowBody示例',
renderTo: Ext.getBody(),
width: 300,
frame: true,
store: {
fields: ['name', 'salary', 'introduce'],
proxy: {
type: 'memory',
data: datas,
reader: 'array'//Ext.data.reader.Array解析器
},
autoLoad: true
},
features: [Ext.create('Ext.grid.feature.RowBody', {
getAdditionalData: function (data, idx, record, orig)
{
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();//获取表格的列数
return {
rowBody: record.get('introduce'),//指定行体内容
rowBodyCls: 'rowbodyColor',//指定行体样式
rowBodyColspan: colspan//指定行体跨列的列数
};
}
})],
columns: [//配置表格列
Ext.create('Ext.grid.RowNumberer', { text: '行号', width: 35 }),
{ header: "姓名", flex: 1, dataIndex: 'name' },
{ header: "薪资", flex: 1, dataIndex: 'salary' }
]
});
})
效果如下:
2、Ext.grid.feature.Summary表格汇总
表格汇总特性将在表格的底部显示一个汇总行,具体如下:
(1)、汇总值的计算:汇总值需要根据表格的每一列进行计算,计算方式通过column中的summaryType配置项进行制定,内置的汇总
计算类型包括
count:计数;
sum:求和;
min:求最小值;
max:求最大值;
average:求平均值
(2)、汇总值得渲染:通过使用summaryRenderer函数进行渲染,传入summaryRenderer函数的参数包括:
value{Object} 合计值;
data{Object}:包含所有合计值得行数据;
field{String}:进行求和计算的字段名
示例代码如下:
//Ext.grid.feature.Summary示例
Ext.onReady(function ()
{
创建表格数据
var datas = [
["张三", 2500],
["李四", 1500],
["王五", 3200],
["钱六", 7500]
];
创建grid表格组件
Ext.create("Ext.grid.Panel", {
title: "Ext.grid.feature.Summary示例",
renderTo: Ext.getBody(),
width: 300,
frame: true,
store: {
fields: ["name", "salary", "introduce"],
proxy: {
type: "memory",
data: datas,
reader:"array"
},
autoLoad:true
},
features:[{
ftype:"summary"
}],
columns:[
配置表格列
{ header:"姓名",flex:1,dataIndex:"name",summaryType:"count",summaryRenderer:function(value){
return "员工总数:<font color=\"red\">" + value + "</font>";
}},
{ header:"薪资",flex:1,dataIndex:"salary",summaryType:"average",summaryRenderer:function(value){
return "平均薪资:<font color=\"red\">" + value + "</font>";
}},
]
});
});
效果如下:
3、Ext.grid.feature.Grouping表格分组
4、Ext.grid.feature.GroupingSummary分组汇总