add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / modern / src / view / NestedLoading.js

/*\r
 * This panel sets up a DataView, which defines an XTemplate used to render our data. We also set up\r
 * the toolbar with the "Load Nested Data" button here\r
 */\r
Ext.define('KitchenSink.view.NestedLoading', {\r
    extend: 'Ext.Container',\r
\r
    layout: 'fit',\r
    items: [{\r
        docked: 'top',\r
        xtype: 'toolbar',\r
        items: [{\r
            text: 'Load Nested Data',\r
            handler: function() {\r
                Ext.getCmp('NestedLoadingDataView').getStore().load();\r
            }\r
        }, {\r
            text: 'Explain',\r
            handler: function() {\r
                if (!this.explanation) {\r
                    this.explanation = Ext.create('Ext.Panel', {\r
                        modal: true,\r
                        hideOnMaskTap: true,\r
                        centered: true,\r
                        width: Ext.filterPlatform('ie10') ? '100%' : 320,\r
                        height: Ext.filterPlatform('ie10') ? '60%' : 200,\r
                        styleHtmlContent: true,\r
                        scrollable: true,\r
                        items: {\r
                            docked: 'top',\r
                            xtype: 'toolbar',\r
                            title: 'Loading Nested Data'\r
                        },\r
                        html: [\r
                            '<p>The data package can load deeply nested data in a single request. In this example we are loading a fictional',\r
                            'dataset containing Users, their Orders, and each Order\'s OrderItems.</p>',\r
                            '<p>Instead of pulling down each record in turn, we load the full data set in a single request and allow the data',\r
                            'package to automatically parse the nested data.</p>',\r
                            '<p>As one of the more complex examples, it is worth tapping the "Source" button to see how this is set up.</p>'\r
                        ].join("")\r
                    });\r
                    Ext.Viewport.add(this.explanation);\r
                }\r
                this.explanation.show();\r
            }\r
        }]\r
    }, {\r
        xtype: 'dataview',\r
        id: 'NestedLoadingDataView',\r
        emptyText: 'No Data Loaded',\r
        styleHtmlContent: true,\r
        /*\r
         * The XTemplate allows us to easily render the data from our User model, as well as\r
         * iterating over each User's Orders and OrderItems:\r
         */\r
        itemTpl: [\r
            '<div class="user">',\r
                '<h3>{name}\'s orders:</h3>',\r
                '<tpl for="orders">',\r
                    '<div class="order" style="padding: 0 0 10px 20px;">',\r
                        'Order: {id} ({status})',\r
                        '<ul>',\r
                        '<tpl for="orderItems">',\r
                            '<li>{quantity} x {name}</li>',\r
                        '</tpl>',\r
                        '</ul>',\r
                    '</div>',\r
                '</tpl>',\r
            '</div>'\r
        ].join(''),\r
        store: {\r
            model: 'User',\r
            autoDestroy: true\r
        }\r
    }]\r
});