Custom overflowHandler in ExtJS 4 (Part 2)

[betazold]

Next, we need to create class Ext4.layout.container.boxOverflow.TBar2 (it has so long name because ExtJS searches handleOverflow (which is instance of String) in hardcoded Ext4.layout.container.boxOverflow namespace).

/**
 * @class Ext4.layout.container.boxOverflow.TBar2
 * Class for using as overflowHandler
 * @extends Ext.layout.container.boxOverflow.None
 */
Ext4.define('Ext4.layout.container.boxOverflow.TBar2', {
    extend : 'Ext4.layout.container.boxOverflow.None',
 
    /**
     * @private
     * @property {Boolean} initialized
     */
    initialized : false,
 
    constructor : function () {
        /**
         * @private
         * @property {Array} tbar2Items
         * List of moved components
         */
        this.tbar2Items = [];
        return this.callParent(arguments);
    },
 
    beginLayout : function (ownerContext) {
        if (!this.initialized) {
            this.layout.owner.ownerCt.on('afterlayout', this.createTBar2, this);
            this.initialized = true;
        }
        this.callParent(arguments);
        this.clearOverflow(ownerContext);
    },
 
    beginLayoutCycle : function (ownerContext, firstCycle) {
        this.callParent(arguments);
        if (!firstCycle) {
            this.clearOverflow(ownerContext);
            this.layout.cacheChildItems(ownerContext);
        }
    },
 
    getOverflowCls : function () {
        return Ext4.baseCSSPrefix + this.layout.direction + '-box-overflow-body';
    },
 
    /**
     * @private
     * @property {Object} _asLayoutRoot
     */
    _asLayoutRoot : { isRoot : true },
 
    clearOverflow : function () {
        // If afterlayout is not processing and tbar2 already created,
        // we can to move components from tbar2 to first toolbar, because now
        // there isn't any overflow
        if (!this.processing && this.tbar2) {
            this.tbar2.items.each(function (item) {
                this.tbar1.add(item);
                // change ui from saved property, or CSS will be incorrect
                item.ui = item.origUI;
            }, this);
            this.tbar2.removeAll(false);
            this.tbar2.hide();
        }
        this.tbar2Items.length = 0;
    },
 
    /**
     * @private
     * Creates tbar2 and does other routines
     */
    createTBar2 : function () {
        // if afterlayout event is still processing, 
        // or we don't need to handle toolbar overflow, just return from function
        if (this.processing || !this.doTbar2) {
            return;
        }
        this.processing = true;
        this.doTbar2 = false;
        var me = this,
            ownerContext = this.mOwnerContext,
            layout = me.layout,
            owner = layout.owner,
            names = layout.getNames(),
            startProp = names.x,
            sizeProp = names.width,
            plan = ownerContext.state.boxPlan,
            available = plan.targetSize[sizeProp],
            childItems = ownerContext.childItems,
            len = childItems.length,
            childContext,
            comp, i, props,
            tbarOwner = owner.ownerCt;
 
        me.tbar1 = owner;
        // save components which will be moved
        owner.suspendLayouts();
        me.tbar2Items.length = 0;
        for (i = 0; i < len; i++) {
            childContext = childItems[i];
            props = childContext.props;
            if (props[startProp] + props[sizeProp] > available) {
                comp = childContext.target;
                me.tbar2Items.push(comp);
                // save original ui property
                comp.origUI = comp.ui;
                owner.remove(comp, false);
            }
        }
        owner.resumeLayouts();
 
        // add tbar2 to the layout cycle (you can see very similar code in clearOverflow
        // method of Ext.layout.container.boxOverflow.Menu)
        tbarOwner.suspendLayouts();
        me.tbar2 = tbarOwner.getDynamicTBar('tbar2');
        me.tbar2.show();
        // moving components
        Ext4.each(me.tbar2Items, function (item, index) {
            me.tbar2.insert(index, item);
            item.ui = item.origUI;
        });
        tbarOwner.resumeLayouts(this._asLayoutRoot);
        this.processing = false;
    },
 
    handleOverflow : function (ownerContext) {
        // set flag and store context for later using
        this.doTbar2 = true;
        this.mOwnerContext = ownerContext;
    }
 
});