Ext.js5的小鲱鱼分页（11）（silding pager）

哈哈，不知道怎么翻译好，silding有小鲱鱼的意思，蛮可爱了，就决定是你啦~
view

/**
 * This example demonstrates using a custom paging display.
 * 这个其实和分页的功能不一样，就是长得不一样了，感觉很鸡肋，可以跟10对比一下
 */
Ext.define('KitchenSink.view.grid.SlidingPager', {
    extend: 'Ext.grid.Panel',

    requires: [
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.util.*',
        'Ext.toolbar.Paging',
        'Ext.ux.SlidingPager',
        'KitchenSink.model.Company'
    ],
    xtype: 'sliding-pager',


    height: 460,
    width: 600,
    frame: true,
    title: 'Sliding Pager',

    initComponent: function(){
        this.width = 650;
        var store = new Ext.data.Store({
            model: KitchenSink.model.Company,
            remoteSort: true,
            pageSize: 10,
            proxy: {
                type: 'memory',
                enablePaging: true,
                data: KitchenSink.data.DataSets.company,
                reader: {
                    type: 'array'
                }
            }
        });

        Ext.apply(this, {
            store: store,
            columns: [{ 
                text: 'Company',
                sortable: true,
                dataIndex: 'name',
                flex: 1
            },{
                text: 'Price',
                sortable: true,
                formatter: 'usMoney',
                dataIndex: 'price',
                width: 75
            },{
                text: 'Change',
                sortable: true,
                renderer: this.changeRenderer,
                dataIndex: 'change',
                width: 80
            },{
                text: '% Change',
                sortable: true,
                renderer: this.pctChangeRenderer,
                dataIndex: 'pctChange',
                width: 100
            },{
                text: 'Last Updated',
                sortable: true,
                dataIndex: 'lastChange',
                width: 115,
                formatter: 'date("m/d/Y")'
            }],
            bbar: {
                xtype: 'pagingtoolbar',
                pageSize: 10,
                store: store,
                displayInfo: true,
                plugins: new Ext.ux.SlidingPager()//就是引用的插件不一样了
            }
        });
        this.callParent();
    },

    afterRender: function(){
        this.callParent(arguments);
        this.getStore().load();
    },

    changeRenderer: function(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if(val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    },

    pctChangeRenderer: function(val){
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if(val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }
});

model就不上了，都一样了。啧啧，日后肯定还会再来的，毕竟理解肯定不一样了。