add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / toolbar / Breadcrumb.js

/**\r
 * Demonstrates a breadcrumb toolbar. A breadcrumb component is just another way of\r
 * navigating hierarchical data structures. It is bound to a standard tree store and\r
 * allows the user to set the selected node by clicking on the navigation buttons.\r
 */\r
Ext.define('KitchenSink.view.toolbar.Breadcrumb', {\r
    extend: 'Ext.panel.Panel',\r
    xtype: 'breadcrumb-toolbar',\r
    id: 'breadcrumb-toolbar',\r
    //<example>\r
    exampleTitle: 'Breadcrumb Toolbar',\r
    otherContent: [{\r
        type: 'store',\r
        path: 'classic/samples/store/Files.js'\r
    }],\r
    profiles: {\r
        classic: {\r
            width: 380\r
        },\r
        neptune: {\r
            width: 500\r
        },\r
        'neptune-touch': {\r
            width: 620\r
        }\r
    },\r
    //</example>\r
\r
    overflowHandler: 'scroller',\r
\r
    height: 400,\r
\r
    html: KitchenSink.DummyText.longText,\r
    bodyPadding: 20,\r
\r
    initComponent: function() {\r
        var store = new KitchenSink.store.Files();\r
\r
        this.width = this.profileInfo.width;\r
\r
        //<example>\r
        // TODO: when using KitchenSink.store.Files(), nodes with children (e.g. app, or button)\r
        // will return false when hasChildNodes() is called.  When using the exact\r
        // same data inline, the problem does not occur.  Remove this workaround when fixed.\r
        store = new Ext.data.TreeStore({\r
            root: {\r
                expanded: true,\r
                children: [\r
                    {\r
                        text: 'app',\r
                        children: [\r
                            { leaf:true, text: 'Application.js' }\r
                        ]\r
                    },\r
                    {\r
                        text: 'button',\r
                        expanded: true,\r
                        children: [\r
                            { leaf:true, text: 'Button.js' },\r
                            { leaf:true, text: 'Cycle.js' },\r
                            { leaf:true, text: 'Split.js' }\r
                        ]\r
                    },\r
                    {\r
                        text: 'container',\r
                        children: [\r
                            { leaf:true, text: 'ButtonGroup.js' },\r
                            { leaf:true, text: 'Container.js' },\r
                            { leaf:true, text: 'Viewport.js' }\r
                        ]\r
                    },\r
                    {\r
                        text: 'core',\r
                        children: [\r
                            {\r
                                text: 'dom',\r
                                children: [\r
                                    { leaf:true, text: 'Element.form.js' },\r
                                    { leaf:true, text: 'Element.static-more.js' }\r
                                ]\r
                            }\r
                        ]\r
                    },\r
                    {\r
                        text: 'dd',\r
                        children: [\r
                            { leaf:true, text: 'DD.js' },\r
                            { leaf:true, text: 'DDProxy.js' },\r
                            { leaf:true, text: 'DDTarget.js' },\r
                            { leaf:true, text: 'DragDrop.js' },\r
                            { leaf:true, text: 'DragDropManager.js' },\r
                            { leaf:true, text: 'DragSource.js' },\r
                            { leaf:true, text: 'DragTracker.js' },\r
                            { leaf:true, text: 'DragZone.js' },\r
                            { leaf:true, text: 'DragTarget.js' },\r
                            { leaf:true, text: 'DragZone.js' },\r
                            { leaf:true, text: 'Registry.js' },\r
                            { leaf:true, text: 'ScrollManager.js' },\r
                            { leaf:true, text: 'StatusProxy.js' }\r
                        ]\r
                    },\r
                    {\r
                        text: 'core',\r
                        children: [\r
                            { leaf:true, text: 'Element.alignment.js' },\r
                            { leaf:true, text: 'Element.anim.js' },\r
                            { leaf:true, text: 'Element.dd.js' },\r
                            { leaf:true, text: 'Element.fx.js' },\r
                            { leaf:true, text: 'Element.js' },\r
                            { leaf:true, text: 'Element.position.js' },\r
                            { leaf:true, text: 'Element.scroll.js' },\r
                            { leaf:true, text: 'Element.style.js' },\r
                            { leaf:true, text: 'Element.traversal.js' },\r
                            { leaf:true, text: 'Helper.js' },\r
                            { leaf:true, text: 'Query.js' }\r
                        ]\r
                    },\r
                    { leaf:true, text: 'Action.js' },\r
                    { leaf:true, text: 'Component.js' },\r
                    { leaf:true, text: 'Editor.js' },\r
                    { leaf:true, text: 'Img.js' },\r
                    { leaf:true, text: 'Layer.js' },\r
                    { leaf:true, text: 'LoadMask.js' },\r
                    { leaf:true, text: 'ProgressBar.js' },\r
                    { leaf:true, text: 'Shadow.js' },\r
                    { leaf:true, text: 'ShadowPool.js' },\r
                    { leaf:true, text: 'ZIndexManager.js' }\r
                ]\r
            }\r
        });\r
        //</example>\r
        this.tbar = [{\r
            xtype: 'breadcrumb',\r
            store: store,\r
            showIcons: true,\r
            // Start with "Ext JS > dd > DragZone.js" selected\r
            selection: store.getRoot().childNodes[4].childNodes[7]\r
        }];\r
\r
        this.callParent();\r
    }\r
});