add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / component-loader / component-loader.js

Ext.require([\r
    //'Ext.panel.Panel',\r
    //'Ext.form.field.Number'\r
    '*'\r
]);\r
\r
Ext.onReady(function(){\r
    var main = Ext.create('Ext.panel.Panel', {\r
        renderTo: document.body,\r
        width: 800,\r
        height: 400,\r
        bodyPadding: 5,\r
        layout: {\r
            type: 'hbox',\r
            align: 'stretch'\r
        },\r
        defaults: {\r
            border: true\r
        },\r
        items: [{\r
            flex: 1,\r
            margin: '0 2 0 0',\r
            title: 'Load raw html',\r
            bodyPadding: 5,\r
            loader: {\r
                autoLoad: true,\r
                url: 'content.html',\r
                scripts: true\r
            }\r
        }, {\r
            flex: 1,\r
            margin: '0 2 0 3',\r
            title: 'Load data for template',\r
            bodyPadding: 5,\r
            tpl: 'Favorite Colors<br /><br /><tpl for="."><b>{name}</b> - <span style="color: #{hex};">{color}</span><br /></tpl>',\r
            loader: {\r
                autoLoad: true,\r
                url: 'data.json',\r
                renderer: 'data'\r
            }\r
        }, {\r
            flex: 1,\r
            margin: '0 0 0 3',\r
            bodyPadding: 5,\r
            layout: {\r
                type: 'vbox',\r
                align: 'stretch'\r
            },\r
            defaults: {\r
                margin: '0 0 5 0'\r
            },\r
            title: 'Load Dynamic Components - No autoLoad',\r
            itemId: 'dynamic',\r
            dockedItems: [{\r
                dock: 'bottom',\r
                xtype: 'toolbar',\r
                items: [{\r
                    fieldLabel: '# to load',\r
                    labelWidth: 60,\r
                    width: 160,\r
                    xtype: 'numberfield',\r
                    value: 5,\r
                    minValue: 1,\r
                    size: 5,\r
                    itemId: 'toLoad'\r
                }, {\r
                    text: 'Load!',\r
                    handler: function(){\r
                        var dynamic = main.child('#dynamic'),\r
                            value = dynamic.down('#toLoad').getValue();\r
                            \r
                        dynamic.getLoader().load({\r
                            params: {\r
                                total: value\r
                            }\r
                        });\r
                    }\r
                }]\r
            }],\r
            loader: {\r
                loadMask: true,\r
                removeAll: true,\r
                url: 'boxes.php',\r
                renderer: 'component',\r
                success: function(loader){\r
                    var panel = loader.getTarget();\r
                    panel.setTitle('Loaded ' + panel.items.getCount() + ' items');\r
                }\r
            }\r
        }]    \r
    });\r
});\r