Hello.
I have panel with two toolbars. How can I to implement custom class for using as overflowHandler, which will move components to second toolbar on first toolbar's overflow?
I tried to use code of Ext.layout.container.boxOverflow.Menu, but my second toolbar simply hides.
Here is my code, which was mixed with toolbar overflow example from ExtJS 4 distributive.

PHP Code:
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 (
0len topBars.lengthleni++) {
                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 (ownerContextfirstCycle) {
            
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,
                
compiprops,
                
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 (
0leni++) {
                
childContext childItems[i];
                
props childContext.props;
                if (
props[startProp] + props[sizeProp] > available) {
                    
comp childContext.target;
                    
me.tbar2Items.push(comp);
                    
owner.remove(compfalse);
                }
            }
            
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(itemindex) {
                
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(cmcolor){
            
Ext.example.msg('Color Selected''<span style="color:#' color ';">You choose {0}.</span>'color);
        }
    });
    
    var 
showDate = function(dvalue) {
        
Ext.example.msg('<b>Action date</b>''You picked ' Ext.Date.format(valued.format));
    };
    
    var 
fromPicker false;

    
Ext.create('Ext.window.Window', {
        
title'Standard',
        
closablefalse,
        
height:250,
        
width500,
        
bodyStyle'padding:10px',
        
contentEl'content',
        
autoScrolltrue,
        
tbarExt.create('Ext.toolbar.Toolbar', {
            
layout: {
                
overflowHandler'TBar2'
            
},
            
items: [{
                
xtype:'splitbutton',
                
text'Menu Button',
                
iconCls'add16',
                
handlerExt.Function.pass(handleAction'Menu Button'),
                
menu: [{text'Menu Item 1'handlerExt.Function.pass(handleAction'Menu Item 1')}]
            },
'-',{
                
xtype:'splitbutton',
                
text'Cut',
                
iconCls'add16',
                
handlerExt.Function.pass(handleAction'Cut'),
                
menu: [{text'Cut menu'handlerExt.Function.pass(handleAction'Cut menu')}]
            },{
                
text'Copy',
                
iconCls'add16',
                
handlerExt.Function.pass(handleAction'Copy')
            },{
                
text'Paste',
                
iconCls'add16',
                
menu: [{text'Paste menu'handlerExt.Function.pass(handleAction'Paste menu')}]
            },
'-',{
                
text'Format',
                
iconCls'add16',
                
handlerExt.Function.pass(handleAction'Format')
            },
'->', {
                
fieldLabel'Action',
                
labelWidth70,
                
width180,
                
xtype'datefield',
                
labelSeparator'',
                
enableKeyEventstrue,
                
listeners: {
                    
expand: function(){
                        
fromPicker true;
                    },
                    
collapse: function(){
                        
fromPicker false;  
                    },
                    
change: function(dnewValoldVal) {
                        if (
fromPicker || !d.isVisible()) {
                            
showDate(dnewVal);
                        }
                    },
                    
keypress: {
                        
buffer500,
                        
fn: function(field){
                            var 
value field.getValue();
                            if (
value !== null && field.isValid()) {
                                
showDate(fieldvalue);
                            }
                        }
                    }
                }
            }, {
                
text'Sell',
                
iconCls'money-down',
                
enableToggletrue,
                
toggleHandler: function(buttonpressed) {
                    
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',
                
menucolorMenu // <-- submenu by reference
            
}]
        })
    }).
show();
});