Ext.grid.Panel表格特性Feature

原創

三维突破

2020-02-20 17:00

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>";
            }},
        ]
    });
});

效果如下：