Results 1 to 4 of 4

Thread: Why won't the width extend 100%

  1. #1

    Default Why won't the width extend 100%

    Why won't the inner borderlayout region extend its width to 100%? The UI needs to be built with an inner borderlayout to facilitate the swapping in/out of content regions whilst sharing tabs and a toolbar.

    Here's a link to show you the problem: http://www.thevine.co.nz/test/ui/test5.html

    Can anyone please help?

    Thanks,
    Steve

    Here's the code:

    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="../lib/3rdparty/ext-1.1-rc1/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../lib/3rdparty/ext-1.1-rc1/adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="../lib/3rdparty/ext-1.1-rc1/adapter/yui/ext-yui-adapter.js"></script>
    <script type="text/javascript" src="../lib/3rdparty/ext-1.1-rc1/ext-all-debug.js"></script>
    <script language="javascript">
    function test() {
    	// create the classic 5-region layout
    	var mainLayout = new Ext.BorderLayout(
    		document.body, 
    		{
    			north:  { split: true, initialSize: 50  },
    			south:  { split: true, initialSize: 50  },
    			east:   { split: true, initialSize: 100 }, 
    			west:   { split: true, initialSize: 100 }, 
    			center: { alwaysShowTabs: true, tabPosition: 'top' }
    		}
    	);
    	
    	mainLayout.beginUpdate();
    	
    	// add content panels
    	mainLayout.add('north', new Ext.ContentPanel(Ext.id(), { autoCreate: true, fitToFrame: true, closable: false }));
    	mainLayout.add('south', new Ext.ContentPanel(Ext.id(), { autoCreate: true, fitToFrame: true, closable: false }));
    	mainLayout.add('east',  new Ext.ContentPanel(Ext.id(), { autoCreate: true, fitToFrame: true, closable: false }));
    	mainLayout.add('west',  new Ext.ContentPanel(Ext.id(), { autoCreate: true, fitToFrame: true, closable: false }));
    
    	// add content panels (content categories) to the 'center' region
    	var cp1 = new Ext.ContentPanel(Ext.id(), { autoCreate: true, title: 'content category 1' });
    	mainLayout.add('center', cp1);
    
    	// add content panels (content categories) to the 'center' region
    	var cp2 = new Ext.ContentPanel(Ext.id(), { autoCreate: true, title: 'content category 2' });
    	mainLayout.add('center', cp2);
    
    	// add a toolbar to the 'center' region tab
    	// (note: the toolbar will eventually host dropdown hierachical menus)
    	var tb1 = new Ext.Toolbar(Ext.DomHelper.append(cp1.el, { tag: 'div' }, true));
    	tb1.addButton({ text: 'content menu 1' });
    	tb1.addButton({ text: 'content menu 2' });
    	tb1.addButton({ text: 'content menu 3' });
    
    	mainLayout.getRegion('center').getTabs().getTab(0).activate();
    
    	// create an area for flexible BorderLayout content
    	var content = Ext.DomHelper.append(cp1.el, { tag: 'div' }, true);
    
    	// define a BorderLayout for the tabs 'content' area.
    	// This content area needs regions because we'll be swapping
    	// content in and out using the the remove() and add() methods.
    	var layout1 = new Ext.BorderLayout(
    		content,
    		{
    			center: {				// <-- this region will be removed (preserved) and re-added as we switch between content using the toolbar
    				titleBar: true,
    				title: "< -- why won't region go full width? -- >"
    			}
    		}
    	);
    
    	// the inner content may comprise of a single panel or multiple panels
    	// Question: Why doesn't the Panel resize to the width of the 'content' div?
    	var panel1 = new Ext.NestedLayoutPanel(
    		layout1,
    		{
    			fitContainer: true,		// <-- appears to have no effect
    			fitToFrame: true		// <-- appears to have no effect
    		}
    	);
    	
    	// here's an example of a content block we will swap in and out (we call it a workspace)
    	var wsBorderLayout = new Ext.BorderLayout(
    		Ext.DomHelper.append(layout1.getRegion('center').bodyEl, { tag: 'div' }),
    		{
    			north:  { split: true, initialSize: 100, titleBar: true, title: 'workspace panel 1' }, 
    			center: { titleBar: true, title: 'workspace panel 2'}
    		}
    	);
    	var wsLayoutPanel = new Ext.NestedLayoutPanel(wsBorderLayout);
    	layout1.getRegion('center').add(wsLayoutPanel);
    
    	
    	mainLayout.endUpdate();
    }
    </script>
    </head>
    <body onload="test()">
    </body>
    </html>

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    You're setting the main container to 200px.
    <div id="ext-gen109" class="x-layout-panel x-layout-panel-center" style="left: 0px; top: 0px; width: 200px; height: 200px;">

  3. #3

    Default

    I see what you mean, but that's nothing I'm doing. I just downloaded a clean 1.1 version and the same thing happens. For some reason the width style is being set to 200px somewhere.

  4. #4

    Thumbs up [RESOLVED]

    The following code snippet resolved this issue.

    Code:
    :
    :
    mainLayout.endUpdate();
    layout1.layout();

Posting Permissions

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