add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / grid / ProgressBarPager.js

/**\r
 * This example demonstrates using a custom paging display.\r
 */\r
Ext.define('KitchenSink.view.grid.ProgressBarPager', {\r
    extend: 'Ext.grid.Panel',\r
    \r
    requires: [\r
        'Ext.data.*',\r
        'Ext.grid.*',\r
        'Ext.util.*',\r
        'Ext.toolbar.Paging',\r
        'Ext.ux.ProgressBarPager',\r
        'KitchenSink.model.Company'\r
    ],\r
    xtype: 'progress-bar-pager',\r
    //<example>\r
    exampleTitle: 'Progress Bar Pager Extension',\r
    otherContent: [{\r
        type: 'Model',\r
        path: 'classic/samples/model/Company.js'\r
    }],\r
    profiles: {\r
        classic: {\r
            width: 600,\r
            percentChangeColumnWidth: 75,\r
            lastUpdatedColumnWidth: 85\r
        },\r
        neptune: {\r
            width: 650,\r
            percentChangeColumnWidth: 100,\r
            lastUpdatedColumnWidth: 115\r
        }\r
    },\r
    //</example>\r
    height: 320,\r
    frame: true,\r
    title: 'Progress Bar Pager',\r
    \r
    initComponent: function() {\r
        this.width = this.profileInfo.width;\r
        \r
        var store = new Ext.data.Store({\r
            model: KitchenSink.model.Company,\r
            remoteSort: true,\r
            pageSize: 10,\r
            proxy: {\r
                type: 'memory',\r
                enablePaging: true,\r
                data: KitchenSink.data.DataSets.company,\r
                reader: {\r
                    type: 'array'\r
                }\r
            }\r
        });\r
        \r
        Ext.apply(this, {\r
            store: store,\r
            columns: [{ \r
                text: 'Company',\r
                sortable: true,\r
                dataIndex: 'name',\r
                flex: 1\r
            },{\r
                text: 'Price',\r
                sortable: true,\r
                formatter: 'usMoney',\r
                dataIndex: 'price',\r
                width: 75\r
            },{\r
                text: 'Change',\r
                sortable: true,\r
                renderer: this.changeRenderer,\r
                dataIndex: 'change',\r
                width: 80\r
            },{\r
                text: '% Change',\r
                sortable: true,\r
                renderer: this.pctChangeRenderer,\r
                dataIndex: 'pctChange',\r
                width: this.profileInfo.percentChangeColumnWidth\r
            },{\r
                text: 'Last Updated',\r
                sortable: true,\r
                dataIndex: 'lastChange',\r
                width: this.profileInfo.lastUpdatedColumnWidth,\r
                formatter: 'date("m/d/Y")'\r
            }],\r
            bbar: {\r
                xtype: 'pagingtoolbar',\r
                pageSize: 10,\r
                store: store,\r
                displayInfo: true,\r
                plugins: new Ext.ux.ProgressBarPager()\r
            }\r
        });\r
        this.callParent();\r
    },\r
    \r
    afterRender: function(){\r
        this.callParent(arguments);\r
        this.getStore().load();\r
    },\r
    \r
    changeRenderer: function(val) {\r
        if (val > 0) {\r
            return '<span style="color:green;">' + val + '</span>';\r
        } else if(val < 0) {\r
            return '<span style="color:red;">' + val + '</span>';\r
        }\r
        return val;\r
    },\r
    \r
    pctChangeRenderer: function(val){\r
        if (val > 0) {\r
            return '<span style="color:green;">' + val + '%</span>';\r
        } else if(val < 0) {\r
            return '<span style="color:red;">' + val + '%</span>';\r
        }\r
        return val;\r
    }\r
});\r