add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / panel / Header.js

/**\r
 * This container class is used to manage the items (such as title and tools) for `Ext.Panel`.\r
 *\r
 * @since 6.0.1\r
 */\r
Ext.define('Ext.panel.Header', {\r
    extend: 'Ext.Container',\r
    xtype: 'panelheader',\r
\r
    /**\r
     * @property {Boolean} isPanelHeader\r
     * `true` in this class to identify an object as an instantiated Header, or a subclass\r
     * thereof.\r
     * @readonly\r
     */\r
    isPanelHeader: true,\r
\r
    baseCls: Ext.baseCSSPrefix + 'panel-header',\r
\r
    config: {\r
        /**\r
         * @cfg {Number/String} glyph\r
         * @accessor\r
         * A numeric unicode character code to use as the icon.  The default font-family\r
         * for glyphs can be set globally using\r
         * {@link Ext.app.Application#glyphFontFamily glyphFontFamily} application\r
         * config or the {@link Ext#setGlyphFontFamily Ext.setGlyphFontFamily()} method.\r
         *\r
         * The following shows how to set the glyph using the font icons provided in the\r
         * SDK (assuming the font-family has been configured globally):\r
         *\r
         *     // assumes the glyphFontFamily is "FontAwesome"\r
         *     glyph: 'xf005'     // the "home" icon\r
         *\r
         *     // assumes the glyphFontFamily is "Pictos"\r
         *     glyph: 'H'         // the "home" icon\r
         *\r
         * Alternatively, this config option accepts a string with the charCode and\r
         * font-family separated by the `@` symbol.\r
         *\r
         *     // using Font Awesome\r
         *     glyph: 'xf005@FontAwesome'     // the "home" icon\r
         *\r
         *     // using Pictos\r
         *     glyph: 'H@Pictos'              // the "home" icon\r
         *\r
         * Depending on the theme you're using, you may need include the font icon\r
         * packages in your application in order to use the icons included in the\r
         * SDK.  For more information see:\r
         *\r
         *  - [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/cheatsheet/)\r
         *  - [Pictos icons](http://docs.sencha.com/extjs/6.0/core_concepts/font_ext.html)\r
         *  - [Theming Guide](http://docs.sencha.com/extjs/6.0/core_concepts/theming.html)\r
         */\r
        glyph: null,\r
\r
        /**\r
         * @cfg {String} icon\r
         * Path to an image to use as an icon.\r
         *\r
         * For instructions on how you can use icon fonts including those distributed in\r
         * the SDK see {@link #iconCls}.\r
         * @accessor\r
         */\r
        icon: null,\r
\r
        /**\r
         * @cfg {'top'/'right'/'bottom'/'left'} [iconAlign='left']\r
         * The side of the title to render the icon.\r
         * @accessor\r
         */\r
        iconAlign: null,\r
\r
        /**\r
         * @cfg {String} iconCls\r
         * @accessor\r
         * One or more space separated CSS classes to be applied to the icon element.\r
         * The CSS rule(s) applied should specify a background image to be used as the\r
         * icon.\r
         *\r
         * An example of specifying a custom icon class would be something like:\r
         *\r
         *     // specify the property in the config for the class:\r
         *     iconCls: 'my-home-icon'\r
         *\r
         *     // css rule specifying the background image to be used as the icon image:\r
         *     .my-home-icon {\r
         *         background-image: url(../images/my-home-icon.gif) !important;\r
         *     }\r
         *\r
         * In addition to specifying your own classes, you can use the font icons\r
         * provided in the SDK using the following syntax:\r
         *\r
         *     // using Font Awesome\r
         *     iconCls: 'x-fa fa-home'\r
         *\r
         *     // using Pictos\r
         *     iconCls: 'pictos pictos-home'\r
         *\r
         * Depending on the theme you're using, you may need include the font icon\r
         * packages in your application in order to use the icons included in the\r
         * SDK.  For more information see:\r
         *\r
         *  - [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/cheatsheet/)\r
         *  - [Pictos icons](http://docs.sencha.com/extjs/6.0/core_concepts/font_ext.html)\r
         *  - [Theming Guide](http://docs.sencha.com/extjs/6.0/core_concepts/theming.html)\r
         */\r
        iconCls: null,\r
\r
        /**\r
         * @cfg {String/Ext.panel.Title}\r
         * The title text or config object for the {@link Ext.panel.Title Title} component.\r
         * @accessor\r
         */\r
        title: null,\r
\r
        /**\r
         * @cfg {'left'/'center'/'right'} [titleAlign='left']\r
         * The alignment of the title text within the available space between the\r
         * icon and the tools.\r
         * @accessor\r
         */\r
        titleAlign: null,\r
\r
        layout: {\r
            type: 'hbox',\r
            align: 'center'\r
        }\r
    },\r
\r
    add: function (item) {\r
        var me = this,\r
            isArray = Ext.isArray(item),\r
            array = isArray ? item.slice(0) : [ item ], // copy array since we sort it\r
            items = me.getItems(),\r
            length = items.length,\r
            n = array.length,\r
            c, i, n, pos;\r
\r
        for (i = 0; i < n; ++i) {\r
            // We have to ensure all items are actual instances because the "weight"\r
            // config may come from the class.\r
            array[i] = me.factoryItem(array[i]);\r
        }\r
\r
        Ext.Array.sort(array, me.sortByWeight);\r
\r
        if (length) {\r
            items = items.items; // get the items array of our ItemCollection\r
            pos = 0;\r
\r
            // Both "items" and "array" are in order by weight. For each new item,\r
            // we find the pos where items[pos] is greater than the new item. This\r
            // ensures new items of equal weight are added after existing items of\r
            // that weight.\r
\r
            for (i = 0; i < n; ++i) {\r
                c = array[i];\r
\r
                for ( ; pos < length; ++pos) {\r
                    if (me.sortByWeight(c, items[pos]) < 0) {\r
                        break;\r
                    }\r
                }\r
\r
                me.insert(pos, c);\r
\r
                ++pos;\r
                ++length;\r
            }\r
        } else {\r
            me.callParent([ array ]);\r
        }\r
\r
        return isArray ? array : item;\r
    },\r
\r
    applyTitle: function (newTitle, oldTitle) {\r
        var title = oldTitle;\r
\r
        if (title) {\r
            if (!newTitle || typeof newTitle === 'string') {\r
                title.setText(newTitle || '');\r
            } else if (newTitle) {\r
                title.setConfig(newTitle);\r
            }\r
        } else {\r
            title = Ext.create(this.createTitle(newTitle));\r
        }\r
\r
        return title;\r
    },\r
\r
    createTitle: function (config) {\r
        var ret = {\r
            xtype: 'paneltitle',\r
            flex: 1\r
        };\r
\r
        if (config) {\r
            if (typeof config === 'string') {\r
                config = {\r
                    text: config\r
                };\r
            }\r
\r
            Ext.merge(ret, config);\r
        }\r
\r
        return ret;\r
    },\r
\r
    createTools: function (tools, toolOwner) {\r
        var n = tools && tools.length,\r
            ret = n && [],\r
            c, i;\r
\r
        toolOwner = toolOwner || null;\r
\r
        for (i = 0; i < n; ++i) {\r
            c = tools[i];\r
\r
            if (typeof c === 'string') {\r
                c = {\r
                    xtype: 'paneltool',\r
                    type: c,\r
                    toolOwner: toolOwner\r
                };\r
            } else if (c.isInstance) {\r
                if (toolOwner) {\r
                    c.setToolOwner(toolOwner);\r
                }\r
            } else {\r
                c = Ext.apply({\r
                    xtype: 'paneltool',\r
                    toolOwner: toolOwner\r
                }, c);\r
            }\r
\r
            ret[i] = c;\r
        }\r
\r
        return ret;\r
    },\r
\r
    updateGlyph: function(glyph) {\r
        this.ensureTitle().setGlyph(glyph);\r
    },\r
\r
    updateIcon: function(icon) {\r
        this.ensureTitle().setIcon(icon);\r
    },\r
\r
    updateIconAlign: function(align, oldAlign) {\r
        this.ensureTitle().setIconAlign(align);\r
    },\r
\r
    updateIconCls: function(cls) {\r
        this.ensureTitle().setIconCls(cls);\r
    },\r
\r
    updateTitle: function(title, oldTitle) {\r
        if (oldTitle) {\r
            oldTitle.setConfig(title);\r
        } else {\r
            this.add(title);\r
        }\r
    },\r
\r
    updateTitleAlign: function(align, oldAlign) {\r
        this.ensureTitle().setTextAlign(align);\r
    },\r
\r
    updateUi: function(ui, oldValue) {\r
        this.callParent([ ui, oldValue ]);\r
\r
        this.ensureTitle().setUi(ui);\r
    },\r
\r
    privates: {\r
        clearTools: function () {\r
            var items = this.getItems().items,\r
                c, i;\r
\r
            for (i = items.length; i-- > 0; ) {\r
                c = items[i];\r
\r
                if (c.isPanelTool) {\r
                    this.remove(c);\r
                }\r
            }\r
        },\r
\r
        ensureTitle: function () {\r
            var me = this,\r
                title = me.getTitle();\r
\r
            if (!title) {\r
                me.setTitle('');\r
                title = me.getTitle();\r
            }\r
\r
            return title;\r
        },\r
\r
        sortByWeight: function (item1, item2) {\r
            return (item1.weight || 0) - (item2.weight || 0);\r
        }\r
    }\r
});\r