layout - Implementación Custom overflowHandler en ExtJS 4

extjs4 extjs4.1

Question

Tengo un panel con dos toolbars . ¿Cómo puedo implementar una clase personalizada para usar como overflowHandler , que moverá los componentes a la segunda barra de herramientas en el desbordamiento de la primera barra de herramientas?

Traté de usar el código de Ext.layout.container.boxOverflow.Menu , pero mi segunda barra de herramientas simplemente se oculta.

Aquí está mi código, que se mezcló con el ejemplo de toolbar overflow de ExtJS 4 distributive.

Ext.require([''Ext.window.Window'', ''Ext.toolbar.Toolbar'', ''Ext.menu.ColorPicker'', ''Ext.form.field.Date'']);
Ext.onReady(function(){

    /**
     * Override for implementing tbar2 
     */
    Ext.override(Ext.panel.Panel, {
        bridgeToolbars : function () {
            var toolbar;
            this.callParent(arguments);
            if (this.tbar2) {
                if (Ext.isArray(this.tbar2)) {
                    toolbar = {
                        xtype : ''toolbar'',
                        items : this.tbar2
                    };
                }
                else if (!toolbar.xtype) {
                    toolbar.xtype = ''toolbar'';
                }
                toolbar.dock = ''top'';
                toolbar.isTbar2 = true;
                this.dockedItems = this.dockedItems.concat(toolbar);
                this.tbar2 = null;
            }
        },
        onRender       : function () {
            this.callParent(arguments);
            var topBars = this.getDockedItems(''toolbar[dock="top"]''),
                i,
                len;
            for (i = 0, len = topBars.length; i < len; i++) {
                if (topBars[i].isTbar2) {
                    this.tbar2 = topBars[i];
                    break;
                }
            }
        },
        /**
         * Lazy creates new toolbar and returns it
         * @param {Ext.panel.Panel} panel
         * @param {String} position
         * @return {Ext.toolbar.Toolbar}
         */
        getDynamicTBar : function (position) {
            var panel = this,
                params,
                tb;
            position = position || ''top'';
            if (position === ''tbar2'') {
                tb = panel.tbar2;
                params = {dock : ''top'', isTbar2 : true};
            }
            else {
                tb = panel.getDockedItems(''toolbar[dock="'' + position + ''"]'');
                params = {dock : position};
                if (tb.length > 0) {
                    tb = tb[0];
                }
            }
            if (!tb) {
                console.log(''created tb at '' + position);
                tb = Ext.create(''Ext.toolbar.Toolbar'', params);
                panel.addDocked(tb);
            }
            return tb;
        }
    });

    Ext.define(''Ext.layout.container.boxOverflow.TBar2'', {
        extend : ''Ext.layout.container.boxOverflow.None'',

        constructor : function () {
            this.tbar2Items = [];
            return this.callParent(arguments);
        },

        beginLayout : function (ownerContext) {
            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 Ext.baseCSSPrefix + this.layout.direction + ''-box-overflow-body'';
        },

        _asLayoutRoot : { isRoot : true },

        clearOverflow : function () {
            if (this.tbar2) {
                this.tbar2.suspendLayouts();
                this.tbar2.hide();
                this.tbar2.resumeLayouts(this._asLayoutRoot);
            }
            this.tbar2Items.length = 0;
        },

        handleOverflow : function (ownerContext) {

            var me = this,
                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;
            owner.suspendLayouts();
            // Hide all items which are off the end, and store them to allow them to be restored
            // before each layout operation.
            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);
                    owner.remove(comp, false);
                }
            }
            owner.resumeLayouts();
            if (!me.tbar2 && (tbarOwner instanceof Ext.panel.Panel)) {
                me.tbar2 = tbarOwner.getDynamicTBar(''tbar2'');
            }
            me.tbar2.suspendLayouts();
            me.tbar2.show();

            Ext.each(me.tbar2Items, function(item, index) {
                me.tbar2.add(item);
            });
            me.tbar2.resumeLayouts(me._asLayoutRoot);
        }

    });


    var handleAction = function(action){
        Ext.example.msg(''<b>Action</b>'', ''You clicked "'' + action + ''"'');
    };

    var colorMenu = Ext.create(''Ext.menu.ColorPicker'', {
        handler: function(cm, color){
            Ext.example.msg(''Color Selected'', ''<span style="color:#'' + color + '';">You choose {0}.</span>'', color);
        }
    });

    var showDate = function(d, value) {
        Ext.example.msg(''<b>Action date</b>'', ''You picked '' + Ext.Date.format(value, d.format));
    };

    var fromPicker = false;

    Ext.create(''Ext.window.Window'', {
        title: ''Standard'',
        closable: false,
        height:250,
        width: 500,
        bodyStyle: ''padding:10px'',
        contentEl: ''content'',
        autoScroll: true,
        tbar: Ext.create(''Ext.toolbar.Toolbar'', {
            layout: {
                overflowHandler: ''TBar2''
            },
            items: [{
                xtype:''splitbutton'',
                text: ''Menu Button'',
                iconCls: ''add16'',
                handler: Ext.Function.pass(handleAction, ''Menu Button''),
                menu: [{text: ''Menu Item 1'', handler: Ext.Function.pass(handleAction, ''Menu Item 1'')}]
            },''-'',{
                xtype:''splitbutton'',
                text: ''Cut'',
                iconCls: ''add16'',
                handler: Ext.Function.pass(handleAction, ''Cut''),
                menu: [{text: ''Cut menu'', handler: Ext.Function.pass(handleAction, ''Cut menu'')}]
            },{
                text: ''Copy'',
                iconCls: ''add16'',
                handler: Ext.Function.pass(handleAction, ''Copy'')
            },{
                text: ''Paste'',
                iconCls: ''add16'',
                menu: [{text: ''Paste menu'', handler: Ext.Function.pass(handleAction, ''Paste menu'')}]
            },''-'',{
                text: ''Format'',
                iconCls: ''add16'',
                handler: Ext.Function.pass(handleAction, ''Format'')
            },''->'', {
                fieldLabel: ''Action'',
                labelWidth: 70,
                width: 180,
                xtype: ''datefield'',
                labelSeparator: '''',
                enableKeyEvents: true,
                listeners: {
                    expand: function(){
                        fromPicker = true;
                    },
                    collapse: function(){
                        fromPicker = false;  
                    },
                    change: function(d, newVal, oldVal) {
                        if (fromPicker || !d.isVisible()) {
                            showDate(d, newVal);
                        }
                    },
                    keypress: {
                        buffer: 500,
                        fn: function(field){
                            var value = field.getValue();
                            if (value !== null && field.isValid()) {
                                showDate(field, value);
                            }
                        }
                    }
                }
            }, {
                text: ''Sell'',
                iconCls: ''money-down'',
                enableToggle: true,
                toggleHandler: function(button, pressed) {
                    Ext.example.msg(''<b>Action</b>'', ''Right ToggleButton '' + (pressed ? ''Buy'' : ''Sell''));
                    button.setText(pressed ? ''Buy'' : ''Sell'')
                    button.setIconCls(pressed ? ''money-up'' : ''money-down'')
                }
            }, {
                text: ''Choose a Color'',
                menu: colorMenu // <-- submenu by reference
            }]
        })
    }).show();
});

Answer 1

Necesitamos implementar overflowHandler para el diseño de la barra de herramientas, que agregará una segunda barra de herramientas y ajustará los componentes de la primera barra de herramientas a la segunda cuando no se puedan mostrar porque no hay suficiente ancho del contenedor de la barra de herramientas. Primero, debemos anular Ext.panel.Panel:

Ext4.override(Ext4.panel.Panel, {
    bridgeToolbars: function () {
        var toolbar;
        this.callParent(arguments);
        if (this.tbar2) {
            if (Ext4.isArray(this.tbar2)) {
                toolbar = {
                    xtype: ''toolbar'',
                    items: this.tbar2
                };
            } else if (!toolbar.xtype) {
                toolbar.xtype = ''toolbar'';
            }
            toolbar.dock = ''top'';
            toolbar.isTbar2 = true;
            this.dockedItems = this.dockedItems.concat(toolbar);
            this.tbar2 = null;
        }
    },
    onRender: function () {
        this.callParent(arguments);
        var topBars = this.getDockedItems(''toolbar[dock="top"]''),
            i,
            len;
        for (i = 0, len = topBars.length; i < len; i++) {
            if (topBars[i].isTbar2) {
                this.tbar2 = topBars[i];
                break;
            }
        }
    },
    /**
     * Creates, if not exists, and returns toolbar at passed position
     * @param {Ext.panel.Panel} panel
     * @param {String} position
     * @return {Ext.toolbar.Toolbar}
     */
    getDynamicTBar: function (position) {
        var panel = this,
            params,
            tb;
        position = position || ''top'';
        if (position === ''tbar2'') {
            tb = panel.tbar2;
            params = {
                dock: ''top'',
                isTbar2: true,
                layout: {
                    overflowHandler: ''Scroller''
                }
            };
        } else {
            tb = panel.getDockedItems(''toolbar[dock="'' + position + ''"]'');
            params = {
                dock: position
            };
            if (tb.length > 0) {
                tb = tb[0];
            }
        }
        if (!tb) {
            tb = Ext4.create(''Ext4.toolbar.Toolbar'', params);
            panel.addDocked(tb);
            if (position === ''tbar2'') {
                panel.tbar2 = tb;
            }
        }
        return tb;
    }
});

A continuación, tenemos que crear la clase Ext4.layout.container.boxOverflow.TBar2 (tiene un nombre tan largo porque ExtJS busca handleOverflow (que es una instancia de String) en el espacio de nombres Ext4.layout.container.boxOverflow codificado).

/**
 * @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;
    }

});

Tenga en cuenta que utilizo el arranque ExtJS 4 (porque en mi aplicación web también existe ExtJD 2.3), por lo que en su código probablemente deba usar Ext. en lugar de Ext4.