<!DOCTYPE html>
<html>
<head>
    <meta name="google" content="notranslate" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>

    <link rel="stylesheet" type="text/css" href="extjs/build/classic/theme-neptune/resources/theme-neptune-all.css" />
    <link rel="stylesheet" type="text/css" href="extjs/build/packages/ux/classic/neptune/resources/ux-all.css" />


    <script type="text/javascript" src="extjs/build/ext-all.js"></script>
    <script type="text/javascript" src="extjs/build/classic/theme-neptune/theme-neptune.js"></script>
    <!--<script type="text/javascript" src="/build/packages/ux/classic/ux.js"></script>-->

</head>
<body>
    <div id="editor-grid" style="width: 100%;"></div>


<script>

Ext.onReady(function(){
    Ext.define('Products', {
        extend: 'Ext.data.Model',
        fields: [
	    { name: 'id' },
	    { name: 'model' },
            { name: 'name' },
            { name: 'price', type: 'float' },
	    { name: 'categoryName' },
	    { name: 'categoryID' },
            { name: 'active', type: 'bool' }
        ]
    });

    var store = Ext.create('Ext.data.Store', {
	autoLoad: true,
        autoSync: true,
        model: 'Products',
        proxy: {
            type: 'ajax',
	    api: {
                read: 'read.php',
                update: 'update.php',
            },
            reader: {
                type: 'json', successProperty: 'success', root: 'data', messageProperty: 'message'
            },
            writer: { 
		type: 'json', writeAllFields: false, root: 'data'
	    },
            listeners: {
                exception: function(proxy, response, operation){
                    Ext.MessageBox.show({
                        title: 'REMOTE EXCEPTION',
                        msg: operation.getError(),
                        icon: Ext.MessageBox.ERROR,
                        buttons: Ext.Msg.OK
                    });
                }
            }
        },
        listeners: {
            write: function(proxy, operation){
                if (operation.action == 'destroy') {
                    main.child('#form').setActiveRecord(null);
                }
                Ext.example.msg(operation.action, operation.getResultSet().message);
            }
        },
        sorters: [{property: 'name',direction: 'DESC'}]
    });

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });

    var grid = Ext.create('Ext.grid.Panel', {
	renderTo: 'editor-grid',
        store: store,
        columns: [
	{
            header: 'Model',
            dataIndex: 'model',
            width: 60,
            //flex: 1,
            editor: {
                allowBlank: false
            }
        },
	{
            header: 'Name',
            dataIndex: 'name',
            flex: 1,
            editor: {
                allowBlank: false
            }
        },
	{
            header: 'Category',
            dataIndex: 'categoryName',
            flex: 1,
            editor: {
                allowBlank: false
            }
        },
	{
            xtype: 'numbercolumn',
            header: 'Price',
            dataIndex: 'price',
            format: '0.0р.',
            width: 150,
            editor: {
                xtype: 'numberfield',
		format:'0.00',
                allowBlank: false,
                minValue: 1,
                maxValue: 9990000
            }
        }, {
            xtype: 'checkcolumn',
            header: 'Active?',
            dataIndex: 'active',
            width: 80,
            editor: {
                xtype: 'checkbox',
                cls: 'x-grid-checkheader-editor'
            }
        }],
        plugins: [rowEditing],
        listeners: {
            'selectionchange': function(view, records) {
                grid.down('#removeEmployee').setDisabled(!records.length);
            }
        }
    });
});

</script>
</body>
</html>
