Ext.define("App.view.OrderLogGrid", {
    extend: "Ext.grid.Panel",
    xtype: "orderLogGrid",
    params: {},
    viewConfig : {
        enableTextSelection: true
    },

    loadStore: function(orderId){
        var store = this.getStore();
        Ext.apply(store.getProxy().extraParams, {orderId:orderId});

        store.loadPage(1, {
            params: { start: 0 },
            callback: function (records, operation, success) { }
        });
    },

    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            bbar: {
                xtype: 'pagingtoolbar',
                displayInfo: true
            },
            store: Ext.create('App.store.OrderLogStore', {}),
            columns: [
                {
                    xtype: 'rownumberer',
                    text: '',
                    width: 30,
                },
                {
                    xtype: 'datecolumn',
                    dataIndex: 'modified',
                    text: App.localeRes('Date'),
                    width: 200,
                    format: App.dateTimeSecFormat
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'userName',
                    width: 150,
                    text: App.localeRes('User'),
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'tableName',
                    text: App.localeRes('Table'),
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'actionStr',
                    text: App.localeRes('Action'),
                    renderer: function (value, metaData, record, row, col, store, grid) {
                        var str = "";
                        if(value == 'Create'){
                            return "<font  color='#64A41C'><b>" + value + '</b></font>';
                        }else if(value == 'Delete'){
                            return "<font  color='#DB4455'><b>" + value + '</b></font>';
                        }else{
                            return "<font  color='#F2A405'><b>" + value + '</b></font>';
                        }
                    },
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'item',
                    width: 200,
                    text: App.localeRes('Item Ref.'),
                    renderer: function (value, metaData, record, row, col, store, grid) {
                        return record.get("tableName")+"-"+record.get("recordId");
                    },
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'dataStr',
                    flex: 1,
                    text: App.localeRes('Data'),
                    cellWrap: true,
                    renderer: function (value, metaData, record, row, col, store, grid) {
                        if(!value) return "";
                        return '<div style="padding: 5px 0px 0px 10px;">' + App.nl2br(value) + '</div>';
                    },
                },
            ],
        });

        me.callParent(arguments);
    }
});
