add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / layout / container / boxOverflow / Menu.js

/**\r
 * @private\r
 */\r
Ext.define('Ext.layout.container.boxOverflow.Menu', {\r
\r
    /* Begin Definitions */\r
\r
    extend: 'Ext.layout.container.boxOverflow.None',\r
    requires: ['Ext.toolbar.Separator', 'Ext.button.Button'],\r
    alternateClassName: 'Ext.layout.boxOverflow.Menu',\r
    alias: [\r
        'box.overflow.menu',\r
        'box.overflow.Menu' // capitalized for 4.x compat\r
    ],\r
\r
    /* End Definitions */\r
\r
    /**\r
     * @property {String} noItemsMenuText\r
     * HTML fragment to render into the toolbar overflow menu if there are no items to display\r
     */\r
    noItemsMenuText : '<div class="' + Ext.baseCSSPrefix + 'toolbar-no-items" role="menuitem">(None)</div>',\r
\r
    menuCls: Ext.baseCSSPrefix + 'box-menu',\r
\r
    constructor: function(config) {\r
        var me = this;\r
\r
        me.callParent([config]);\r
\r
        /**\r
         * @property {Array} menuItems\r
         * Array of all items that are currently hidden and should go into the dropdown menu\r
         */\r
        me.menuItems = [];\r
    },\r
\r
    beginLayout: function (ownerContext) {\r
        this.callParent([ownerContext]);\r
\r
        // Before layout, we need to re-show all items which we may have hidden due to a\r
        // previous overflow...\r
        this.clearOverflow(ownerContext);\r
    },\r
\r
    beginLayoutCycle: function (ownerContext, firstCycle) {\r
        this.callParent([ownerContext, firstCycle]);\r
\r
        if (!firstCycle) {\r
            // if we are being re-run, we need to clear any overflow from the last run and\r
            // recache the childItems collection\r
            this.clearOverflow(ownerContext);\r
\r
            this.layout.cacheChildItems(ownerContext);\r
        }\r
    },\r
\r
    onRemove: function(comp) {\r
        Ext.Array.remove(this.menuItems, comp);\r
    },\r
\r
    clearItem: function(comp) {\r
        var menu = comp.menu;\r
\r
        if (comp.isButton && menu) {\r
            // If the button had a menu, forcibly set it\r
            // again so that the ownerCmp is reset correctly\r
            // and is no longer pointing at the overflow\r
            comp.setMenu(menu, false);\r
        }\r
    },\r
\r
    // We don't define a prefix in menu overflow.\r
    getSuffixConfig: function() {\r
        var me = this,\r
            layout = me.layout,\r
            owner = layout.owner,\r
            oid = owner.id;\r
\r
        /**\r
         * @private\r
         * @property {Ext.menu.Menu} menu\r
         * The expand menu - holds items for every item that cannot be shown\r
         * because the container is currently not large enough.\r
         */\r
        me.menu = new Ext.menu.Menu({\r
            listeners: {\r
                scope: me,\r
                beforeshow: me.beforeMenuShow\r
            }\r
        });\r
\r
        /**\r
         * @private\r
         * @property {Ext.button.Button} menuTrigger\r
         * The expand button which triggers the overflow menu to be shown\r
         */\r
        me.menuTrigger = new Ext.button.Button({\r
            id: oid + '-menu-trigger',\r
            cls: me.menuCls + '-after ' + Ext.baseCSSPrefix + 'toolbar-item',\r
            plain: owner.usePlainButtons,\r
            ownerCt: owner, // To enable the Menu to ascertain a valid zIndexManager owner in the same tree\r
            ownerLayout: layout,\r
            iconCls: Ext.baseCSSPrefix + me.getOwnerType(owner) + '-more-icon',\r
            ui: owner.defaultButtonUI || 'default',\r
            menu: me.menu,\r
            // Menu will be empty when we're showing it because we populate items after\r
            showEmptyMenu: true,\r
            getSplitCls: function() { return '';}\r
        });\r
\r
        return me.menuTrigger.getRenderTree();\r
    },\r
    \r
    getOverflowCls: function(direction) {\r
        return this.menuCls + '-body-' + direction;\r
    },\r
\r
    handleOverflow: function(ownerContext) {\r
        var me = this,\r
            layout = me.layout;\r
\r
        me.showTrigger(ownerContext);\r
\r
        // Center the menuTrigger button only if we are not vertical.\r
        if (layout.direction !== 'vertical') {\r
            me.menuTrigger.setLocalY(\r
                (ownerContext.state.boxPlan.maxSize - me.menuTrigger[layout.names.getHeight]()) / 2\r
            );\r
        }\r
\r
        return {\r
            reservedSpace: me.triggerTotalWidth\r
        };\r
    },\r
\r
    /**\r
     * Finishes the render operation of the trigger Button.\r
     * @private\r
     */\r
    captureChildElements: function() {\r
        var me = this,\r
            menuTrigger = me.menuTrigger,\r
            names = me.layout.names;\r
\r
        // The rendering flag is set when getRenderTree is called which we do when returning markup string for the owning layout's "suffix"\r
        if (menuTrigger.rendering) {\r
            menuTrigger.finishRender();\r
            me.triggerTotalWidth = menuTrigger[names.getWidth]() + menuTrigger.el.getMargin(names.parallelMargins);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Called by the layout, when it determines that there is no overflow.\r
     * Also called as an interceptor to the layout's onLayout method to reshow\r
     * previously hidden overflowing items.\r
     */\r
    clearOverflow: function(ownerContext) {\r
        var me = this,\r
            items = me.menuItems,\r
            length = items.length,\r
            owner = me.layout.owner,\r
            asLayoutRoot = owner._asLayoutRoot,\r
            item, i;\r
\r
        owner.suspendLayouts();\r
        me.captureChildElements();\r
        me.hideTrigger();\r
        owner.resumeLayouts();\r
\r
        for (i = 0; i < length; i++) {\r
            item = items[i];\r
\r
            // What we are doing here is preventing the layout bubble from invalidating our\r
            // owner component. We need just the button to be added to the layout run.\r
            item.suspendLayouts();\r
            item.show();\r
            me.clearItem(item);\r
            item.resumeLayouts(asLayoutRoot);\r
        }\r
\r
        items.length = 0;\r
    },\r
\r
    /**\r
     * @private\r
     * Shows the overflow trigger when enableOverflow is set to true and the items\r
     * in the layout are too wide to fit in the space available\r
     */\r
    showTrigger: function(ownerContext) {\r
        var me = this,\r
            layout = me.layout,\r
            owner = layout.owner,\r
            names = layout.names,\r
            startProp = names.x,\r
            sizeProp = names.width,\r
            plan = ownerContext.state.boxPlan,\r
            available = plan.targetSize[sizeProp],\r
            childItems = ownerContext.childItems,\r
            menuTrigger = me.menuTrigger,\r
            menuItems = me.menuItems,\r
            childContext, comp, i, props, len;\r
\r
        // We don't want the menuTrigger.show to cause owner's layout to be invalidated, so\r
        // we force just the button to be invalidated and added to the current run.\r
        menuTrigger.suspendLayouts();\r
        menuTrigger.show();\r
        menuTrigger.resumeLayouts(me._asLayoutRoot);\r
\r
        available -= me.triggerTotalWidth;\r
\r
        owner.suspendLayouts();\r
\r
        // Hide all items which are off the end, and store them to allow them to be restored\r
        // before each layout operation.\r
        for (i = 0, len = menuItems.length; i < len; ++i) {\r
            me.clearItem(menuItems[i]);\r
        }\r
        menuItems.length = 0;\r
\r
        for (i = 0, len = childItems.length; i < len; i++) {\r
            childContext = childItems[i];\r
            props = childContext.props;\r
            if (props[startProp] + props[sizeProp] > available) {\r
                comp = childContext.target;\r
                me.menuItems.push(comp);\r
                comp.hide();\r
            }\r
        }\r
\r
        owner.resumeLayouts();\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    hideTrigger: function() {\r
        var menuTrigger = this.menuTrigger;\r
        if (menuTrigger) {\r
            menuTrigger.hide();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Called before the overflow menu is shown. This constructs the menu's items, caching them for as long as it can.\r
     */\r
    beforeMenuShow: function(menu) {\r
        var me = this,\r
            items = me.menuItems,\r
            i = 0,\r
            len   = items.length,\r
            item,\r
            prev,\r
            needsSep = function(group, prev){\r
                return group.isXType('buttongroup') && !(prev instanceof Ext.toolbar.Separator);\r
            };\r
\r
        menu.suspendLayouts();\r
        menu.removeAll(false);\r
\r
        for (; i < len; i++) {\r
            item = items[i];\r
\r
            // Do not show a separator as a first item\r
            if (!i && (item instanceof Ext.toolbar.Separator)) {\r
                continue;\r
            }\r
            if (prev && (needsSep(item, prev) || needsSep(prev, item))) {\r
                menu.add('-');\r
            }\r
\r
            me.addComponentToMenu(menu, item);\r
            prev = item;\r
        }\r
\r
        // put something so the menu isn't empty if no compatible items found\r
        if (menu.items.length < 1) {\r
            menu.add(me.noItemsMenuText);\r
        }\r
        menu.resumeLayouts();\r
    },\r
    \r
    /**\r
     * @private\r
     * Returns a menu config for a given component. This config is used to create a menu item\r
     * to be added to the expander menu\r
     * @param {Ext.Component} component The component to create the config for\r
     * @param {Boolean} hideOnClick Passed through to the menu item\r
     */\r
    createMenuConfig: function (component, hideOnClick) {\r
        var config = Ext.apply({}, component.initialConfig),\r
            group  = component.toggleGroup;\r
\r
        Ext.copy(config, component, [\r
            'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu', 'tabIndex'\r
        ]);\r
\r
        Ext.applyIf(config, {\r
            text: component.overflowText || component.text,\r
            hideOnClick: hideOnClick,\r
            destroyMenu: false,\r
            listeners: null\r
        });\r
        config.masterComponent = component;\r
\r
        // Clone must have same value, and must sync original's value on change\r
        if (component.isFormField) {\r
            config.value = component.getValue();\r
\r
            // Sync the original component's value when the clone changes value.\r
            // This intentionally overwrites any developer-configured change listener on the clone.\r
            // That's because we monitor the clone's change event, and sync the\r
            // original field by calling setValue, so the original field's change\r
            // event will still fire.\r
            config.listeners = {\r
                change: function(c, newVal, oldVal) {                            \r
                    c.masterComponent.setValue(newVal);\r
                }\r
            };\r
            // Sync the cloned Component's value when the master changes value.\r
            component.on('change', function(c, newVal, oldVal) {\r
                c.overflowClone.setValue(newVal);\r
            });\r
        }\r
\r
        // ToggleButtons become CheckItems\r
        else if (group || component.enableToggle) {\r
            Ext.apply(config, {\r
                hideOnClick: false,\r
                group: group,\r
                checked: component.pressed,\r
                handler: function (item, e) {\r
                    item.masterComponent.onClick(e);\r
                }\r
            });\r
        }\r
\r
        // Buttons may have their text or icon changed - this must be propagated to the clone in the overflow menu\r
        if (component.isButton && !component.changeListenersAdded) {\r
            component.on({\r
                textchange: this.onButtonAttrChange,\r
                iconchange: this.onButtonAttrChange,\r
                toggle: this.onButtonToggle\r
            });\r
            component.changeListenersAdded = true;\r
        }\r
\r
        // Typically margins are used to separate items in a toolbar\r
        // but don't really make a lot of sense in a menu, so we strip\r
        // them out here.\r
        delete config.margin;\r
        delete config.ownerCt;\r
        delete config.xtype;\r
        delete config.id;\r
        delete config.itemId;\r
        return config;\r
    },\r
\r
    onButtonAttrChange: function(btn) {\r
        var clone = btn.overflowClone;\r
        clone.suspendLayouts();\r
        clone.setText(btn.text);\r
        clone.setIcon(btn.icon);\r
        clone.setIconCls(btn.iconCls);\r
        clone.resumeLayouts(true);\r
    },\r
\r
    onButtonToggle: function(btn, state) {\r
        // Keep the clone in sync with the original if necessary\r
        if (btn.overflowClone.checked !== state) {\r
            btn.overflowClone.setChecked(state);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Adds the given Toolbar item to the given menu. Buttons inside a buttongroup are added individually.\r
     * @param {Ext.menu.Menu} menu The menu to add to\r
     * @param {Ext.Component} component The component to add\r
     * TODO: Implement overrides in Ext.layout.container.boxOverflow which create overrides\r
     * for SplitButton, Button, ButtonGroup, and TextField. And a generic one for Component\r
     * which create clones suitable for use in an overflow menu.\r
     */\r
    addComponentToMenu: function(menu, component) {\r
        var me = this,\r
            i, items, iLen;\r
\r
        // No equivalent to fill, skip it\r
        if (component instanceof Ext.toolbar.Fill) {\r
            return;\r
        }\r
        // Separator maps to MenuSeparator\r
        else if (component instanceof Ext.toolbar.Separator) {\r
            menu.add('-');\r
        }\r
        else if (component.overflowClone) {\r
            menu.add(component.overflowClone);\r
        }\r
        // Other types...\r
        else if (component.isComponent) {\r
            if (component.isXType('splitbutton')) {\r
                component.overflowClone = menu.add(me.createMenuConfig(component, true));\r
\r
            } else if (component.isXType('button')) {\r
                component.overflowClone = menu.add(me.createMenuConfig(component, !component.menu));\r
\r
            } else if (component.isXType('buttongroup')) {\r
                items = component.items.items;\r
                iLen  = items.length;\r
\r
                for (i = 0; i < iLen; i++) {\r
                    me.addComponentToMenu(menu, items[i]);\r
                }\r
            } else {\r
                component.overflowClone = menu.add(Ext.create(Ext.getClassName(component), me.createMenuConfig(component)));\r
            }\r
        }\r
    },\r
\r
    destroy: function() {\r
        var me = this,\r
            trigger = me.menuTrigger;\r
            \r
        if (trigger && !me.layout.owner.items.contains(trigger)) {\r
            // Ensure we delete the ownerCt if it's not in the items\r
            // so we don't get spurious container remove warnings.\r
            delete trigger.ownerCt;\r
        }\r
        me.menu = me.menuTrigger = Ext.destroy(me.menu, trigger);\r
        me.callParent();\r
    }\r
});