add extjs 6.0.1 sources

[extjs.git] / extjs / packages / ux / classic / src / Explorer.js

/**\r
 * An explorer component for navigating hierarchical content.  Consists of a breadcrumb bar\r
 * at the top, tree navigation on the left, and a center panel which displays the contents\r
 * of a given node.\r
 */\r
Ext.define('Ext.ux.Explorer', {\r
    extend: 'Ext.panel.Panel',\r
    xtype: 'explorer',\r
    requires: [\r
        'Ext.layout.container.Border',\r
        'Ext.toolbar.Breadcrumb',\r
        'Ext.tree.Panel'\r
    ],\r
\r
    config: {\r
        /**\r
         * @cfg {Object} breadcrumb\r
         * Configuration object for the breadcrumb toolbar\r
         */\r
        breadcrumb: {\r
            dock: 'top',\r
            xtype: 'breadcrumb',\r
            reference: 'breadcrumb'\r
        },\r
\r
        /**\r
         * @cfg {Object} contentView\r
         * Configuration object for the "content" data view\r
         */\r
        contentView: {\r
            xtype: 'dataview',\r
            reference: 'contentView',\r
            region: 'center',\r
            cls: Ext.baseCSSPrefix + 'explorer-view',\r
            itemSelector: '.' + Ext.baseCSSPrefix + 'explorer-item',\r
            tpl:\r
                '<tpl for=".">' +\r
                    '<div class="' + Ext.baseCSSPrefix + 'explorer-item">' +\r
                        '<div class="{iconCls}">' +\r
                            '<div class="' + Ext.baseCSSPrefix + 'explorer-node-icon' +\r
                                '{[values.leaf ? " ' + Ext.baseCSSPrefix + 'explorer-leaf-icon' + '" : ""]}' + '">' +\r
                            '</div>' +\r
                            '<div class="' + Ext.baseCSSPrefix + 'explorer-item-text">{text}</div>' +\r
                        '</div>' +\r
                    '</div>' +\r
                '</tpl>'\r
        },\r
\r
        /**\r
         * @cfg {Ext.data.TreeStore} store\r
         * The TreeStore to use as the data source\r
         */\r
        store: null,\r
\r
        /**\r
         * @cfg {Object} tree\r
         * Configuration object for the tree\r
         */\r
        tree: {\r
            xtype: 'treepanel',\r
            reference: 'tree',\r
            region: 'west',\r
            width: 200\r
        }\r
    },\r
\r
    renderConfig: {\r
        /**\r
         * @cfg {Ext.data.TreeModel} selection\r
         * The selected node\r
         * @accessor\r
         */\r
        selection: null\r
    },\r
\r
    layout: 'border',\r
    referenceHolder: true,\r
    defaultListenerScope: true,\r
    cls: Ext.baseCSSPrefix + 'explorer',\r
\r
    initComponent: function() {\r
        var me = this,\r
            store = me.getStore();\r
\r
        //<debug>\r
        if (!store) {\r
            Ext.raise('Ext.ux.Explorer requires a store.');\r
        }\r
        //</debug>\r
\r
        me.dockedItems = [ me.getBreadcrumb() ];\r
\r
        me.items = [ me.getTree(), me.getContentView() ];\r
\r
        me.callParent();\r
    },\r
\r
    applyBreadcrumb: function(breadcrumb) {\r
        var store = this.getStore();\r
\r
        breadcrumb = Ext.create(Ext.apply({\r
            store: store,\r
            selection: store.getRoot()\r
        }, breadcrumb));\r
\r
        breadcrumb.on('selectionchange', '_onBreadcrumbSelectionChange', this);\r
\r
        return breadcrumb;\r
    },\r
\r
    applyContentView: function(contentView) {\r
        /**\r
         * @property {Ext.data.Store} contentStore\r
         * @private\r
         * The backing store for the content view\r
         */\r
        var contentStore = this.contentStore = new Ext.data.Store({\r
            model: this.getStore().model\r
        });\r
\r
        contentView = Ext.create(Ext.apply({\r
            store: contentStore\r
        }, contentView));\r
\r
        return contentView;\r
    },\r
\r
    applyTree: function(tree) {\r
        tree = Ext.create(Ext.apply({\r
            store: this.getStore()\r
        }, tree));\r
\r
        tree.on('selectionchange', '_onTreeSelectionChange', this);\r
\r
        return tree;\r
    },\r
\r
    updateSelection: function(node) {\r
        var me = this,\r
            refs = me.getReferences(),\r
            breadcrumb = refs.breadcrumb,\r
            tree = refs.tree,\r
            treeSelectionModel = tree.getSelectionModel(),\r
            contentStore = me.contentStore,\r
            parentNode, treeView;\r
\r
        if (breadcrumb.getSelection() !== node) {\r
            breadcrumb.setSelection(node);\r
        }\r
\r
        if (treeSelectionModel.getSelection()[0] !== node) {\r
            treeSelectionModel.select([node]);\r
            parentNode = node.parentNode;\r
            if (parentNode) {\r
                parentNode.expand();\r
            }\r
            treeView = tree.getView();\r
            treeView.scrollRowIntoView(treeView.getRow(node));\r
        }\r
\r
        contentStore.removeAll();\r
        contentStore.add(node.hasChildNodes() ? node.childNodes : [node]);\r
    },\r
\r
    updateStore: function(store) {\r
        this.getBreadcrumb().setStore(store);\r
    },\r
\r
    privates: {\r
        /**\r
         * Handles the tree's selectionchange event\r
         * @private\r
         * @param {Ext.tree.Panel} tree\r
         * @param {Ext.data.TreeModel[]} selection\r
         */\r
        _onTreeSelectionChange: function(tree, selection) {\r
            this.setSelection(selection[0]);\r
        },\r
\r
        /**\r
         * Handles the breadcrumb bar's selectionchange event\r
         */\r
        _onBreadcrumbSelectionChange: function(breadcrumb, selection) {\r
            this.setSelection(selection);\r
        }\r
    }\r
});\r