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

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

    stateful: true,
    multiSelect: true,
    stateId: 'stateGrid',
    headerBorders: false,

    viewModel: {
        stores: {
            companies: {
                type: 'companies',
                autoLoad: true,
            }
        }
    },

    viewConfig: {
        enableTextSelection: true
    },

    bind: '{companies}',

    columns: [{
        text: 'Company',
        flex: 1,
        dataIndex: 'name'
    }, {
        text: 'Price',
        width: 95,
        formatter: 'usMoney',
        dataIndex: 'price'
    }, {
        text: 'Change',
        width: 80,
        renderer: 'renderChange',
        dataIndex: 'priceChange'
    }, {
        text: '% Change',
        width: 100,
        renderer: 'renderPercent',
        dataIndex: 'priceChangePct'
    }, {
        text: 'Last Updated',
        width: 115,
        formatter: 'date("m/d/Y")',
        dataIndex: 'priceLastChange'
    }, {
        xtype: 'actioncolumn',
        width: 50,
        menuDisabled: true,
        sortable: false,

        items: [{
            iconCls: 'x-fa fa-check green',
            handler: 'onApprove'
        }, {
            iconCls: 'x-fa fa-ban red',
            handler: 'onDecline'
        }]
    }],

    signTpl: '<span style="' +
            'color:{value:sign(\'"#cf4c35"\',\'"#73b51e"\')}"' +
        '>{text}</span>'
});