Ext.grid.Panel表格特性Feature

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分组汇总

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值