Results 1 to 8 of 8

Thread: [3.0][OPEN] rev 2721 buttongroup in toolbar broken

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Exclamation [3.0][OPEN] rev 2721 buttongroup in toolbar broken

    Items of a buttongroup no longer get rendered. Only the title of the buttongroup gets rendered. Look at "examples/toolbar/toolbars.html" to see for yourself. Calling doLayout() on the toolbar fixes the problem.

    The attached screenshots show what i mean.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    Fixed.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Now everything gets rendered, but the bottomToolbar/fbar is no longer visible. The panelbody height gets calculated wrong. The bottomToolbar/fbar is under the body in a nonvisible area.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    I don't have the same results. What code causes that to happen?

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    This code works great:

    Code:
    new Ext.Panel({
    	renderTo: Ext.getBody(),
            style: 'margin-top:15px',
    	height: 250,
    	width: 500,
    	layout:"fit",
    	bbar: [{
    		text:"testbbar"
    	}],
    	buttons: [{
    		text:"testfbar"
    	}],
    	tbar: [{
                xtype: 'buttongroup',
                title: 'Clipboard',
                columns: 2,
                defaults: {
                    scale: 'small'
                },
                items: [{
                    xtype:'splitbutton',
                    text: 'Hideous',
                    iconCls: 'add16',
                    menu: [{text: 'Ribbons are hideous'}]
                },{
                    xtype:'splitbutton',
                    text: 'Cut',
                    iconCls: 'add16',
                    menu: [{text: 'Hideousness'}]
                },{
                    text: 'Copy',
                    iconCls: 'add16'
                },{
                    text: 'Paste',
                    iconCls: 'add16',
                    menu: [{text: 'Hideousness'}]
                },{
                    text: 'Format',
                    iconCls: 'add16'
                }]
            }],
    	items:  [{
    		html: Ext.example.shortBogusMarkup,
    							
    	}]
    });
    But putting the buttons in the second panel doenst work very well:

    Code:
    new Ext.Panel({
    	renderTo: Ext.getBody(),
            style: 'margin-top:15px',
    	height: 250,
    	width: 500,
    	layout:"fit",
    	items:  [{
    		html: Ext.example.shortBogusMarkup,
    		bbar: [{
    			text:"testbbar"
    		}],
    		buttons: [{
    			text:"testfbar"
    		}],
    		tbar: [{
               		 xtype: 'buttongroup',
                		title: 'Clipboard',
                		columns: 2,
                		defaults: {
                    		scale: 'small'
                		},
                		items: [{
                    		xtype:'splitbutton',
                    		text: 'Hideous',
                    		iconCls: 'add16',
                    		menu: [{text: 'Ribbons are hideous'}]
                		},{
                   			xtype:'splitbutton',
                    		text: 'Cut',
                    		iconCls: 'add16',
                    		menu: [{text: 'Hideousness'}]
                		},{
                    		text: 'Copy',
                    		iconCls: 'add16'
                		},{
                    		text: 'Paste',
                    		iconCls: 'add16',
                    		menu: [{text: 'Hideousness'}]
                		},{
                    		text: 'Format',
                    		iconCls: 'add16'
                		}]
            	}]
    	}]
    });

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    Re-opening this.

  7. #7
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Ok, the problem is, after the toolbar in the inner container is laid out, obviously the height of the element changes, however the body isn't notified so it doesn't change.

    First thought is to measure the height before laying out the toolbar, then checking if the height of the element is different.

  8. #8
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    You can just move the layoutcalls for the toolbars as first methods in the onresize method of panel. That fixes the issue.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •