[ExtJS5学习笔记]第三十六节 报表组件mzPivotGrid - 木鱼哥

[ExtJS5学习笔记]第三十六节 报表组件mzPivotGrid

mzPivotGrid 是一个报表组件，采用这个组件之后，可以令你的应用体现更多的价值。

• • 什么是pivot grid
  • 什么是mzPivotGrid
  • 学习资源
  • 与图表组件的融合

---

什么是pivot grid

extjs的面板panel对于展示大批量数据来说是pefect的，并且还提供了各种各样的展示方式。但是唯一缺少一个pivot grid，当需要做数据报表的时候，pivot grid就起作用了。

什么是mzPivotGrid

mzPivotGrid是可以在extjs中使用的表格报表组件，你只需要引入组件就可以制作报表了。

学习资源

官方网站： http://www.mzsolutions.eu/mzPivotGrid.html
extjs官网推荐博客:http://www.sencha.com/blog/mzpivotgrid-a-pivot-table-for-ext-js?mkt_tok=3RkMMJWWfF9wsRokvq3BZKXonjHpfsX77%2BsqWK%2B0lMI%2F0ER3fOvrPUfGjI4JSMZ0dvycMRAVFZl5nR9dFOOdfQ%3D%3D

API DOChttp://www.mzsolutions.eu/docs/

与图表组件的融合

看效果图;

而完成这个报表仅仅需要以下这些代码即可。

Ext.onReady(function() {
Ext.tip.QuickTipManager.init();

var height = 250, width = 700;

var store = new Ext.data.JsonStore({
    filters: [
        function(item) {
            return item.get(\'year\') >= 2012;
        }
    ],
    proxy: {
        type:       \'ajax\',
        url:        \'charts.json\',
        reader: {
            type:       \'json\',
            root:       \'rows\'
        }
    },
    autoLoad:   true,
    fields: [
        {name: \'orderid\',       type: \'int\'},
        {name: \'salesperson\',   type: \'string\'},
        {name: \'country\',       type: \'string\'},
        {name: \'orderdate\',     type: \'date\', dateFormat: \'d/m/Y\'},
        {name: \'amount\',        type: \'int\'},
        {
            name: \'person-range\',
            convert: function(v, record){
                if(/^[a-j]/i.test(record.get(\'salesperson\'))) return \'A-J\';
                if(/^[k-s]/i.test(record.get(\'salesperson\'))) return \'K-S\';
                if(/^[t-z]/i.test(record.get(\'salesperson\'))) return \'T-Z\';
                return v;
            }
        },{
            name: \'year\',
            convert: function(v, record){
                return Ext.Date.format(record.get(\'orderdate\'), "Y");
            }
        }
    ]
});

var pivotChart = null;

var pivotGrid = Ext.create(\'Mz.pivot.Grid\', {
    renderTo:       document.body,
    title:          \'Chart integration\',
    height:         height,
    width:          width,
    enableLocking:  false,
    enableGrouping: true,
    viewConfig: {
        trackOver:      true,
        stripeRows:     false
    },

    tbar: [{
        xtype:          \'combo\',
        itemId:            \'idSelect\',
        fieldLabel:     \'Select report\',
        flex:             1,
        editable:         false,
        //value: \'r1\',
        store: [
            [\'r1\', \'What are the order amounts of each salesperson?\'],
            [\'r2\', \'What are the order amounts of each salesperson in a specific country?\'],
            [\'r3\', \'How did salespeople perform in a specific year?\']
        ],
        listeners: {
            change: function(combo, newValue, oldValue, eOpts){
                switch(newValue){
                    case \'r1\':
                        pivotGrid.reconfigurePivot({
                            topAxis: []
                        });
                    break;

                    case \'r2\':
                        pivotGrid.reconfigurePivot({
                            topAxis: [{
                                dataIndex:  \'country\',
                                direction:  \'ASC\'
                            }]
                        });
                    break;

                    case \'r3\':
                        pivotGrid.reconfigurePivot({
                            topAxis: [{
                                dataIndex:  \'year\',
                                direction:  \'ASC\'
                            }]
                        });
                    break;
                }
            }
        }
    }],

    store: store,

    aggregate: [{
        measure:    \'amount\',
        header:     \'Sales\',
        aggregator: \'sum\',
        align:      \'right\',
        width:      85,
        renderer:   Ext.util.Format.numberRenderer(\'0,000.00\')
    }],

    caption:  \'\',
    leftAxis: [{
        width:      80,
        id:         \'salesperson\',
        dataIndex:  \'salesperson\',
        header:     \'Sales person\'
    }],

    topAxis: [],

    listeners: {
        afterrender: function(pivotGrid){
            setTimeout(function(){
                var combo = pivotGrid.down(\'#idSelect\');
                combo.select(combo.getStore().getAt(0));
            }, 100);
        },

        pivotdone: function(){
            if(pivotChart){
                pivotChart.destroy();
            }
            var fields = [],
                titles = [],
                columns = pivotGrid.headerCt.getGridColumns();

            for(var i = 0; i < columns.length; i++){
                if(!columns[i].leftAxis){
                    fields.push(columns[i].dataIndex);
                    titles.push(columns[i].text);
                }
            }

            pivotChart = Ext.create(\'Ext.chart.Chart\', {
                renderTo:       document.body,
                width:          width,
                height:         height,
                store:          pivotGrid.getPivotStore(),
                legend: {
                    position:   \'top\'
                },
                axes: [{
                    title:      \'Sales person\',
                    type:       \'Category\',
                    fields:     [\'salesperson\'],
                    position:   \'bottom\'
                },{
                    title:      \'Total\',
                    fields:     fields,
                    type:       \'Numeric\',
                    position:   \'left\'
                }],
                series: [{
                    type:       \'column\',
                    highlight:  true,
                    axis:       \'bottom\',
                    xField:     \'salesperson\',
                    yField:     fields,
                    title:      titles
                }]
            });                
        }
    }
});

});

看不同层次的报表只需要一次配置即可