add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / direct / Grid.js

/**\r
 * This example shows how to use a Grid with a back end Store via Ext Direct proxy.\r
 *\r
 * The grid will be populated with the data queried from a virtual "table" hardcoded\r
 * in the PHP script that handles the requests; sorting is also performed remotely.\r
 */\r
Ext.define('KitchenSink.view.direct.Grid', {\r
    extend: 'Ext.grid.Panel',\r
    xtype: 'direct-grid',\r
    controller: 'directgrid',\r
    \r
    requires: [\r
        'KitchenSink.view.direct.GridController'\r
    ],\r
    \r
    //<example>\r
    exampleTitle: 'Grid with Ext Direct back end',\r
    exampleDescription: [\r
        '<p>This example shows how to connect a Grid to the remote server via a Direct proxy.</p>',\r
        '<p>The data is queried from a virtual "table"; there are two datasets hardcoded',\r
        'in the example PHP script that handles the requests. Data sorting is also remote</p>'\r
    ].join(''),\r
    \r
    otherContent: [{\r
        type: 'ViewController',\r
        path: 'classic/samples/view/direct/GridController.js'\r
    }, {\r
        type: 'Base ViewController',\r
        path: 'classic/samples/view/direct/DirectVC.js'\r
    }, {\r
        type: 'Server TestAction class',\r
        path: 'data/direct/source.php?file=testaction'\r
    }, {\r
        type: 'Server API configuration',\r
        path: 'data/direct/source.php?file=config'\r
    }],\r
    //</example>\r
\r
    title: 'Company Grid',\r
    width: 600,\r
    height: 350,\r
    \r
    store: {\r
        fields: ['name', 'revenue'],\r
        remoteSort: true,\r
        sorters: [{\r
            property: 'name',\r
            direction: 'ASC'\r
        }],\r
        proxy: {\r
            type: 'direct',\r
            directFn: 'TestAction.getGrid',\r
            metadata: {\r
                table: 'customers'\r
            }\r
        }\r
    },\r
    \r
    columns: [{\r
        dataIndex: 'name',\r
        flex: 1,\r
        text: 'Name'\r
    }, {\r
        dataIndex: 'revenue',\r
        align: 'right',\r
        width: 140,\r
        text: 'Annual revenue',\r
        renderer: Ext.util.Format.usMoney\r
    }],\r
    \r
    header: {\r
        items: [{\r
            xtype: 'combobox',\r
            fieldLabel: 'Choose table',\r
            queryMode: 'local',\r
            displayField: 'desc',\r
            valueField: 'table',\r
            forceSelection: true,\r
            editable: false,\r
            value: 'customers',\r
            store: {\r
                fields: ['table', 'desc'],\r
                data: [\r
                    { table: 'customers', desc: 'Existing customers' },\r
                    { table: 'leads',     desc: 'Sales leads' }\r
                ]\r
            },\r
            listeners: {\r
                change: 'onTableChange'\r
            }\r
        }]\r
    }\r
});\r