<script language="javascript">

Ext.Loader.setPath('Ext','/media/ext-js');
Ext.Loader.setConfig({enabled:true});

Ext.require([
             'Ext.grid.*',
             'Ext.data.*',
             'Ext.panel.*',
             'Ext.layout.container.Border',
             'Ext.ux.grid.FiltersFeature'
             ]);

var myDateFormat = "d/m/Y H:i";

Ext.onReady(function(){


    Ext.define('Order',{
        extend: 'Ext.data.Model',
        fields: [
                 'date_created',
                 'status',
                 'name',
                 'phone',
                 'delivery_type',
                 'address',
                 'order_price',
                 'purchase_items'
                 ]
    });

    //filter options
    var local = true;
    var encode = false;



    var status_store = Ext.create('Ext.data.Store',{
        model: 'Statuses',
        proxy: {
            type: 'ajax',
            url: '/json/statuses/',
            reader: 'json'
        }
    });

    var store = Ext.create('Ext.data.Store',{
        model: 'Order',
        proxy: {
            type: 'ajax',
            url: '/shopmng/json/list_of_orders/',
            reader: 'json'
        }
    });

    var filters = {
            ftype: 'filters',
            encode: encode,
            local: local,
            filters: [{
                type: 'list',
                dataIndex: 'name',
                store: 'status_store',
                labelField: 'name'

            }]
            };

    var grid = Ext.create('Ext.grid.Panel',{
        store: store,
        columns: [
                  {Date: 'Date posted', width: 100, dataIndex: 'date_created', sortable: true, format: myDateFormat},
                  {text: 'Status', width: 120, dataIndex: 'status', sortable: true, filterable: true, filter: {type: 'list'}},
                  {text: 'Name', width: 120, dataIndex: 'name', sortable: false},
                  {text: 'Phone', width: 100, dataIndex: 'phone', sortable: false},
                  {text: 'Delivery Type', width: 160, dataIndex: 'delivery_type', sortable: true},
                  {text: 'Delivery Address', width: 220, dataIndex: 'address', sortable: false, flex: true},
                  {text: 'Price', width: 100, dataIndex: 'order_price', sortable: true}
                  ],
        viewConfig: {
            forceFit: true
        },
        height: 200,
        split: true,
        region: 'north',
        features: [filters]
    });

    var OrderTpl = new Ext.XTemplate(
    'Status: {status}, Total price: <strong>{order_price}</strong> <br />',
    'Notes: {notes} <br />',
    'Comments: {staff_comments} <br />',
    '<tpl for="purchase_items">',
    '<hr>',
    '{#}. {picture_name}, {printSize}, {paperType}, количество: {quantity}, цена: {price}',
    '</tpl>'
    );

    Ext.create('Ext.Panel', {
        renderTo: 'management_panel',
        frame: true,
        title: 'Manage Orders',
        width: 1000,
        height: 550,
        layout: 'border',
        items: [grid, {
            id: 'detailPanel',
            region: 'center',
            bodyPadding: 7,
            bodyStyle: 'background: #FFFFFF;',
            html: 'select order to view details'
        }]
    });

    grid.getSelectionModel().on('selectionchange',function(sm, selectedRecord){
        if (selectedRecord.length){
            var detailPanel = Ext.getCmp('detailPanel');
            OrderTpl.overwrite(detailPanel.body, selectedRecord[0].data);
        }
    });

    status_store.load();
    store.load();

});


</script>

<div id='management_panel'></div>