Results 1 to 3 of 3

Thread: [OPEN-440] Wrong Panel width when having a side dock and being a child of a TabPanel

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Apr 2009
    Location
    Bulgaria
    Posts
    21

    Exclamation [OPEN-440] Wrong Panel width when having a side dock and being a child of a TabPanel

    Sencha Touch version tested:
    • 0.97
    • only default ext-all.css




    Platform tested against:
    • iOS 3.x
    • iOS 4


    Description:
    • when docking a component to the side of a Ext.TabPanel item panel (possibly other card layouts also), the size of the item panel does not change, thus leaving content off the screen. Also could be tested by putting the KitchenSink demo inside a TabPanel


    Test Case:

    Code:
                   new Ext.TabPanel({
    		    fullscreen: true,
    			tabBar: {
    		        dock: 'bottom',
    		        ui: 'dark',
    		        layout: {
    		            pack: 'center'
    		        }
    		    },
    		    ui: 'dark',
    		    items: [{
    				title:'Sample Card',
    				layout:'fit',
    				iconCls:'settings',
    				items:[{
    					scroll:'both',
    					html:'<center>Main Panel</center>'
    				}],
    				dockedItems:[{
    					layout:'fit',
    		            dock: 'left',
    					width:320,
    					items:[{
    						html:'<center>Side Panel</center>',
    						style:{
    							borderRight:'2px solid #d7d7d7'
    						}
    					}]
    				}]
    			}]
    		});
    See this URL :


    Steps to reproduce the problem:
    • start a blank project and insert the code above inside the onReady function


    The result that was expected:
    • the width of the main panel should have the width of the side dock substracted


    Screenshot or Video:


    Debugging already done:
    • if you produce introduce an exception inside the layoutOrientation method of the tab item panel, the content will have the right width, so I guess that when the parent container (TabPanel) refreshes it's layout, something goes terribly wrong
    • I was able to overcome the problem doing some nasty coding really ugly so if I extend a panel (like in your Ext.ux.UniversalUI), set it's layout to 'fit', have a single item (an instance of 'card' layout) and overwrite the afterLayout method to the code bellow, the thing starts to work
      Code:
          afterLayout : function(layout) {
      		if(!Ext.is.Phone && Ext.orientation !== 'portrait'){
      			if(typeof this.items.items[0].getWidth === 'function' && typeof this.items.items[0].setWidth === 'function'){
      				this.items.items[0].body.setWidth(this.items.items[0].body.getWidth() - 320);//320 is the width of the side docked item
      				this.items.items[0].doLayout();
      			}
      		}	
      	    FI.UniversalUI.superclass.afterLayout.call(this, layout);
          }


    Possible fix:
    • not provided
    Last edited by ficeto; 16 Oct 2010 at 4:46 AM. Reason: added workaround

  2. #2
    Sencha User
    Join Date
    Aug 2010
    Posts
    534

    Default

    Thanks for the bug report.

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

    Default

    This has since been resolved as of RC1:

    Code:
    Ext.setup({
        icon: 'icon.png',
        glossOnIcon: false,
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        onReady: function(){
            var tabs = new Ext.TabPanel({
                fullscreen: true,
                tabBar: {
                    dock: 'bottom',
                },
                items: [{
                    title: 'Sample Card',
                    html: 'Main',
                    dockedItems: [{
                        layout: 'fit',
                        dock: 'left',
                        width: 320,
                        items: [{
                            html: '<center>Side Panel</center>',
                            style: {
                                borderRight: '2px solid #d7d7d7'
                            }
                        }]
                    }]
                }]
            });
            setTimeout(function(){
                var first = tabs.items.first(),
                    w = first.dockedItems.first().getWidth() + first.body.getWidth();
                console.assert(first.getWidth() == w, 'failed');       
            }, 2000);
        }
    });
    Marking as fixed.

Similar Threads

  1. [OPEN-440][3.??] TreeGrid - hide column error
    By makurin in forum Ext 3.x: Bugs
    Replies: 17
    Last Post: 7 Mar 2012, 6:37 AM
  2. Replies: 2
    Last Post: 30 Jul 2010, 6:50 PM
  3. Side by Side grids, variable width 50% each
    By meyersd in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 11 Dec 2008, 11:14 AM
  4. Panel child of TabPanel, setIconClass not working
    By 6dust in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 28 Apr 2008, 2:00 PM

Posting Permissions

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