Ext.define('uas.view.grid.paging.Panel', {
    extend: 'Ext.grid.Panel',
    xtype: 'paging-grid',
    controller: 'basic-grid',

    requires: [
        'uas.view.grid.basic.PanelController',
        'uas.data.Company',
        'uas.model.Company',
        'uas.store.Companies'
    ],

    store: {
        type: 'companies',
        pageSize: 10,
        remoteSort: true
    },
    signTpl: '<span style="' +
            'color:{value:sign(\'"red"\',\'"green"\')}"' +
        '>{text}</span>',

    columns: [{ 
        text: 'Company',
        dataIndex: 'name',

        sortable: true,
        flex: 1
    },{
        text: 'Price',
        dataIndex: 'price',

        sortable: true,
        formatter: 'usMoney',
        width: 75
    },{
        text: 'Change',
        dataIndex: 'priceChange',

        width: 80,
        sortable: true,
        renderer: 'renderChange'
    },{
        text: '% Change',
        dataIndex: 'priceChangePct',

        width: 75,
        sortable: true,
        renderer: 'renderPercent'
    },{
        text: 'Last Updated',
        dataIndex: 'priceLastChange',

        width: 85,
        sortable: true,
        formatter: 'date("m/d/Y")'
    }],

    bbar: {
        xtype: 'pagingtoolbar',
        displayInfo: true
    }
});