1. #1
    Sencha User
    Join Date
    Apr 2008
    Posts
    365
    Vote Rating
    0
    wuschba is on a distinguished road

      0  

    Default Layout: Flexible width left, fixed width right.

    Layout: Flexible width left, fixed width right.


    Okay, perhaps I got to clean my glasses, but this is driving me nuts:

    The panel is width:100%, it's easy to create a layout with 2 columns and 1 row, which does:
    1. column (left): fixed size
    2. column (right): filling the rest of the width when browser-window is resized

    layout:'border',
    width:'100%',
    height:200,
    items: [{
    title: 'Center Panel',
    region:'center',
    },{
    title: 'West Content',
    region:'west',
    width : 200,
    }],

    But what I want, is that the left coloum is resized while the right-column has a fixed width:
    1. column (left): filling the rest of the width when browser-window is resized
    2. column (right): fixed size

    How is it done?

  2. #2
    Ext User
    Join Date
    Dec 2007
    Posts
    23
    Vote Rating
    0
    pep is on a distinguished road

      0  

    Default


    Make the west your center and the center your east.

  3. #3
    Sencha User
    Join Date
    Apr 2008
    Posts
    365
    Vote Rating
    0
    wuschba is on a distinguished road

      0  

    Default


    Quote Originally Posted by pep View Post
    Make the west your center and the center your east.
    Thanks for your reply. That was what I tried first, but unfortunatly, it doesn't work: When shrinking the browser-window, the left col keeps its size and the right col is cut off till it's not visible anymore.

    My code now is:
    Code:
    	var border = new Ext.Panel({
    		title: 'Border Layout',
    		layout:'border',
    		width:'100%',
    		height:200,
    		items: [{
    			title: 'Flexible Panel',
    			region:'center',
    			margins: '5 5 0 0',
    		},{
    			title: 'Fixed Panel',
    			region:'east',
    			margins: '5 0 0 5',
    			cmargins: '5 5 0 5',
    			width : 200,
    		}],
    		renderTo: bd
    		});
    I attached an image where you can see the result if you shrink the width of the browser-window after loading the page. YOu see that the fixed panel is not 200px anymore.

    If you now reload the page, everything is okay again. Did I miss something? Do I have to tell the layout to re-layout itself?
    Attached Images

  4. #4
    Ext User
    Join Date
    Dec 2007
    Posts
    23
    Vote Rating
    0
    pep is on a distinguished road

      0  

    Default


    Code:
           var viewport = new Ext.Viewport({
                layout:'border',
                items:[{
                    	region:'center',
                    	title:'Center - fits any size'
    			
    			}
    			,{
                    	region:'east',
    		    	title: 'East - fixed at 200',
    			width : 200             
                    	}
                    ]
            });
    viewport handles resizing

  5. #5
    Sencha User
    Join Date
    Apr 2008
    Posts
    365
    Vote Rating
    0
    wuschba is on a distinguished road

      0  

    Default


    Thanks again! But a Viewport is always height 100%, but I need a fixed height of 200px. Is there a way to do so?

  6. #6
    Ext User
    Join Date
    Dec 2007
    Posts
    23
    Vote Rating
    0
    pep is on a distinguished road

      0  

    Default


    try adding monitorResize: true to the panel you are working with - that should resize it for you.

  7. #7
    Sencha User
    Join Date
    Apr 2008
    Posts
    365
    Vote Rating
    0
    wuschba is on a distinguished road

      0  

    Default


    Great. Thanks a lot!!

Thread Participants: 1