Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-4234 in a recent build.
  1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    22
    Vote Rating
    0
    DHainzl is on a distinguished road

      0  

    Default [4.0.0] enableOverflow and scale: 'large' and groups

    [4.0.0] enableOverflow and scale: 'large' and groups


    Ext version tested:
    • Ext 4.0.0
    Browser versions tested against:
    • FF4
    Operating System:
    • Win7
    Description:
    • I have a Ext.panel.Panel with a tbar applied to it. The tbar has scale set to 'large' and enableOverflow: true.
      It has three buttongroups as children.
      When resizing the container, the overflow arrow isn't shown - the container div is too small to display it (discovered with Firebug)
    Test Case:
    Code:
     Ext.require([
        'Ext.panel.*',
        'Ext.toolbar.*',
        'Ext.button.*',
        'Ext.container.ButtonGroup',
        'Ext.layout.container.Table'
    ]);
    
    Ext.onReady(function() {
        var fakeHTML = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
        
        var SamplePanel = Ext.extend(Ext.Panel, {
            width    : 350,
            height   : 250,
            style    : 'margin-top:15px',
            bodyStyle: 'padding:10px',
            renderTo : Ext.getBody(),
            html     : fakeHTML,
            autoScroll: true,
    		resizable: true
        });
        
        new SamplePanel({
            title: 'Standard',
            tbar: new Ext.toolbar.Toolbar (
    		{
    			enableOverflow: true,
    			items:
    			[
    				{
    					xtype:'splitbutton',
    					text: 'Menu Button',
    					iconCls: 'add16',
    					menu: [{text: 'Menu Button 1'}]
    				},'-',{
    					xtype:'splitbutton',
    					text: 'Cut',
    					iconCls: 'add16',
    					menu: [{text: 'Cut Menu Item'}]
    				},{
    					text: 'Copy',
    					iconCls: 'add16'
    				},{
    					text: 'Paste',
    					iconCls: 'add16',
    					menu: [{text: 'Paste Menu Item'}]
    				},'-',{
    					text: 'Format',
    					iconCls: 'add16'
    				}
    			]
    		})
        });
    
        new SamplePanel({
            title: 'Multi columns',
            tbar: new Ext.toolbar.Toolbar (
    		{
    			enableOverflow: true,
    			items:
    			[
    				{
    					xtype: 'buttongroup',
    					title: 'Clipboard',
    					columns: 2,
    					defaults: 
    					{
    						scale: 'small'
    					},
    					items: 
    					[
    						{
    							xtype:'splitbutton',
    							text: 'Menu Button',
    							iconCls: 'add16',
    							menu: [{text: 'Menu Item 1'}]
    						},
    						{
    							xtype:'splitbutton',
    							text: 'Cut',
    							iconCls: 'add16',
    							menu: [{text: 'Cut Menu Item'}]
    						},
    						{
    							text: 'Copy',
    							iconCls: 'add16'
    						},
    						{
    							text: 'Paste',
    							iconCls: 'add16',
    							menu: [{text: 'Paste Menu Item'}]
    						},
    						{
    							text: 'Format',
    							iconCls: 'add16'
    						}
    					]
    				},
    				{
    					xtype: 'buttongroup',
    					title: 'Other Bogus Actions',
    					columns: 2,
    					defaults: 
    					{
    						scale: 'small'
    					},
    					items: 
    					[
    						{
    							xtype:'splitbutton',
    							text: 'Menu Button',
    							iconCls: 'add16',
    							menu: [{text: 'Menu Button 1'}]
    						},
    						{
    							xtype:'splitbutton',
    							text: 'Cut',
    							iconCls: 'add16',
    							menu: [{text: 'Cut Menu Item'}]
    						},
    						{
    							text: 'Copy',
    							iconCls: 'add16'
    						},
    						{
    							text: 'Paste',
    							iconCls: 'add16',
    							menu: [{text: 'Paste Menu Item'}]
    						},
    						{
    							text: 'Format',
    							iconCls: 'add16'
    						}
    					]
    				}
    			]
    		})
        });
        
        new SamplePanel({
            title: 'Multi columns (No titles, double stack)',
    		tbar: new Ext.toolbar.Toolbar (
    		{
    			enableOverflow: true,
    			items: 
    			[
    				{
    					xtype: 'buttongroup',
    					columns: 3,
    					defaults: 
    					{
    						scale: 'small'
    					},
    					items: 
    					[
    						{
    							xtype:'splitbutton',
    							text: 'Menu Button',
    							iconCls: 'add16',
    							menu: [{text: 'Menu Item 1'}]
    						},
    						{
    							xtype:'splitbutton',
    							text: 'Cut',
    							iconCls: 'add16',
    							menu: [{text: 'Cut Menu Item'}]
    						},
    						{
    							text: 'Copy',
    							iconCls: 'add16'
    						},
    						{
    							text: 'Paste',
    							iconCls: 'add16',
    							menu: [{text: 'Paste Menu Item'}]
    						},
    						{
    							text: 'Format',
    							iconCls: 'add16'
    						}
    					]
    				},
    				{
    					xtype: 'buttongroup',
    					columns: 3,
    					defaults: 
    					{
    						scale: 'small'
    					},
    					items: 
    					[
    						{
    							xtype:'splitbutton',
    							text: 'Menu Button',
    							iconCls: 'add16',
    							menu: [{text: 'Menu Item 1'}]
    						},{
    							xtype:'splitbutton',
    							text: 'Cut',
    							iconCls: 'add16',
    							menu: [{text: 'Cut Menu Item'}]
    						},{
    							text: 'Copy',
    							iconCls: 'add16'
    						},{
    							text: 'Paste',
    							iconCls: 'add16',
    							menu: [{text: 'Paste Menu Item'}]
    						},{
    							text: 'Format',
    							iconCls: 'add16'
    						}
    					]
    				}
    			]
    		})
        });
        
        new SamplePanel({
            title: 'Mix and match icon sizes to create a huge unusable toolbar',
    		tbar: new Ext.toolbar.Toolbar (
    		{
    			enableOverflow: true,
    			items:
    			[
    				{
    					xtype: 'buttongroup',
    					columns: 3,
    					title: 'Clipboard',
    					items: 
    					[
    						{
    							text: 'Paste',
    							scale: 'large',
    							rowspan: 3, iconCls: 'add',
    							iconAlign: 'top',
    							cls: 'x-btn-as-arrow'
    						},
    						{
    							xtype:'splitbutton',
    							text: 'Menu Button',
    							scale: 'large',
    							rowspan: 3,
    							iconCls: 'add',
    							iconAlign: 'top',
    							arrowAlign:'bottom',
    							menu: [{text: 'Menu Item 1'}]
    						},
    						{
    							xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
    						},
    						{
    							text: 'Copy', iconCls: 'add16'
    						},
    						{
    							text: 'Format', iconCls: 'add16'
    						}
    					]
    				},
    				{
    					xtype: 'buttongroup',
    					columns: 3,
    					title: 'Other Actions',
    					items: 
    					[
    						{
    							text: 'Paste',
    							scale: 'large',
    							rowspan: 3, iconCls: 'add',
    							iconAlign: 'top',
    							cls: 'x-btn-as-arrow'
    						},
    						{
    							xtype:'splitbutton',
    							text: 'Menu Button',
    							scale: 'large',
    							rowspan: 3,
    							iconCls: 'add',
    							iconAlign: 'top',
    							arrowAlign:'bottom',
    							menu: [{text: 'Menu Button 1'}]
    						},
    						{
    							xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
    						},
    						{
    							text: 'Copy', iconCls: 'add16'
    						},
    						{
    							text: 'Format', iconCls: 'add16'
    						}
    					]
    				}
    			]
    		})
        });
        
        new SamplePanel({
            title: 'Medium icons, arrows to the bottom',
    		tbar: new Ext.toolbar.Toolbar (
    		{
    			enableOverflow: true,
    			items: [{
    				xtype: 'buttongroup',
    				title: 'Clipboard',
    				defaults: {
    					scale: 'medium',
    					iconAlign:'top'
    				},
    				items: [{
    					xtype:'splitbutton',
    					text: 'Menu Button',
    					iconCls: 'add24',
    					arrowAlign:'bottom',
    					menu: [{text: 'Menu Item 1'}]
    				},{
    					xtype:'splitbutton',
    					text: 'Cut',
    					iconCls: 'add24',
    					arrowAlign:'bottom',
    					menu: [{text: 'Cut Menu Item'}]
    				},{
    					text: 'Copy',
    					iconCls: 'add24',
    					cls: 'x-btn-as-arrow'
    				},{
    					text: 'Paste',
    					iconCls: 'add24',
    					arrowAlign:'bottom',
    					menu: [{text: 'Paste Menu Item'}]
    				},{
    					text: 'Format<br/>Stuff',
    					iconCls: 'add24'
    				}]
    			},{
    				xtype: 'buttongroup',
    				title: 'Other Bogus Actions',
    				defaults: {
    					scale: 'medium',
    					iconAlign:'top'
    				},
    				items: [{
    					xtype:'splitbutton',
    					text: 'Menu Button',
    					iconCls: 'add24',
    					arrowAlign:'bottom',
    					menu: [{text: 'Menu Item 1'}]
    				},{
    					xtype:'splitbutton',
    					text: 'Cut',
    					iconCls: 'add24',
    					arrowAlign:'bottom',
    					menu: [{text: 'Cut Menu Item'}]
    				},{
    					text: 'Copy',
    					iconCls: 'add24',
    					cls: 'x-btn-as-arrow'
    				},{
    					text: 'Paste',
    					iconCls: 'add24',
    					arrowAlign:'bottom',
    					menu: [{text: 'Paste Menu Item'}]
    				},{
    					text: 'Format',
    					iconCls: 'add24',
    					cls: 'x-btn-as-arrow'
    				}]
    			}]
    		})
        });
        
        
        new SamplePanel({
            title: 'Medium icons, text and arrows to the left',
    		width: 230,
    		tbar: new Ext.toolbar.Toolbar (
    		{
    			enableOverflow: true,
    			items: [{
    				xtype:'buttongroup',
    				items: [{
    					text: 'Cut',
    					iconCls: 'add24',
    					scale: 'medium'
    				},{
    					text: 'Copy',
    					iconCls: 'add24',
    					scale: 'medium'
    				},{
    					text: 'Paste',
    					iconCls: 'add24',
    					scale: 'medium',
    					menu: [{text: 'Paste Menu Item'}]
    				}]
    			}, {
    				xtype:'buttongroup',
    				items: [{
    					text: 'Format',
    					iconCls: 'add24',
    					scale: 'medium'
    				}]
    			}]
    		})
        });
        
        new SamplePanel({
            title: 'Small icons, text and arrows to the left',
    		width: 220,
    		tbar: new Ext.toolbar.Toolbar (
    		{
    			enableOverflow: true,
    			items: [{
    				xtype:'buttongroup',
    				items: [{
    					text: 'Cut',
    					iconCls: 'add16',
    					scale: 'small'
    				},{
    					text: 'Copy',
    					iconCls: 'add16',
    					scale: 'small'
    				},{
    					text: 'Paste',
    					iconCls: 'add16',
    					scale: 'small',
    					menu: [{text: 'Paste Menu Item'}]
    				}]
    			}, {
    				xtype:'buttongroup',
    				items: [{
    					text: 'Format',
    					iconCls: 'add16',
    					scale: 'small'
    				}]
    			}]
    		})
        });
    });
    This code modifies the Toolbars-Example so that the panels are smaller and resizable and their toolbars have enableOverflow set to true. Debugging already done:
    • It seems that the container for the button has a height of 16px and is aligned to the top of the toolbar panel, while the button itself is aligned at the center and therefore not viewable.
    Too lazy to add a clever signature

  2. #2
    Sencha User
    Join Date
    Jul 2010
    Posts
    22
    Vote Rating
    0
    DHainzl is on a distinguished road

      0  

    Default


    This problem still persists with 4.0.2 - Even further, if you use the gray theme, the toolbar groups have a blue color (instead of a gray one). This is nicely reproducable if you just take the above example and change the style from ext-all.css to ext-all-gray.css.
    Too lazy to add a clever signature

  3. #3
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    55
    Vote Rating
    0
    bodyboarder20 is on a distinguished road

      0  

    Default


    This problem exists in 4.0.2a as well. I also noticed that I can click the button (albeit - you can't see the image) once, but after that, if I click it again, I receive DOM errors....

    I'll see if I can come up w/ a fix for this...

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    9
    Vote Rating
    0
    fabiovilas is on a distinguished road

      0  

    Default How solve this ?

    How solve this ?


    in 4.0.2 donĀ“ t work...

  5. #5
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    6
    Vote Rating
    0
    wildfire is on a distinguished road

      0  

    Default


    This CSS fix worked for me with scale:'medium'

    Code:
    #toolbar .x-box-menu-right {
        overflow: visible;
    }
    
    
    #toolbar .x-box-menu-right .x-btn {
        height:32px!important;
        width: 32px!important;
        padding: 3px!important;
        top:2px!important;
    }
    
    
    #toolbar .x-box-menu-right .x-btn button {
        margin: 4px 0 0 4px;
    }
    Hope it helps in the short term.

    Nick

Similar Threads

  1. Toolbar enableoverflow
    By lucia_mgv in forum Ext: Discussion
    Replies: 1
    Last Post: 5 Apr 2011, 10:40 AM
  2. [DEFER] Combo on the Toolbar with enableOverflow
    By Hacker-CB in forum Ext 3.x: Bugs
    Replies: 5
    Last Post: 1 Apr 2010, 10:02 AM
  3. Replies: 3
    Last Post: 3 Feb 2010, 9:14 AM

Thread Participants: 3