Results 1 to 5 of 5

Thread: Need help with layout

  1. #1

    Default Need help with layout

    Hi all -
    I have created the following layout:
    Code:
    // Global variables
    var viewPort = null;
     
    // Create namespace
    Ext.namespace('layout');
    
    // Create application
    Ext.onReady(function() {
        
        // Private variables
        var browseTree;
        var homeNode;
        var defaulttab; 
        
        viewPort = new Ext.Viewport({
            layout: 'border',
            items: [{
                    region: 'north',
                    html: '<h1 class="x-panel-header">Layout</h1>',
                    autoHeight: true,
                    border: false,
                    margins: '0 0 5 0'
                },{
                    region:'west',
                    title: 'Tree Browser',
                    collapsible: true,
                    split:true,
                    width: 300,
                    minSize: 175,
                    maxSize: 400,
                    layout:'fit',
                    margins:'0 5 0 0',
                    items:
                        new Ext.TabPanel({
                            border:false,
                            activeTab:0,
                            tabPosition:'bottom',
                            items:[{
                                title: 'Tree Browser',
                                xtype: 'treepanel',
                                id: 'browseTree',
                                autoScroll:true,
                                split: true,
                                loader: new Ext.tree.TreeLoader(),
                                root: new Ext.tree.AsyncTreeNode(explorerData),
                                rootVisible: true
                            }, {
                                html: '<table cellspacing="10"><tr><td>Enter the text to be searched:</td></tr><tr><td><input type="text" name="searchText" id="searchText" value="" size="30"/></td></tr><tr><td><input type="submit" name="submitSearch" id="submitSearch" value="Search" /></td></tr></table>',
                                title: 'Search',
                                autoScroll:true
                            }]
                        })
                },{
                    region: 'center',
                    xtype: 'tabpanel',
                    id: 'tabs',
                    width:'auto',
                    height:'auto',
                    minTabWidth:115,
                    tabWidth:220,
                    resizeTabs: true,
                    enableTabScroll:true,
                    activeTab: 0,
                    items: {
                        title: 'Tab 1',
                        id: 'tab1',
                        closable:true
                    }
                }, {
                    region: 'south',
                    title: 'Information',
                    height: 100,
                    minSize: 100,
                    maxSize: 200,
                    html: 'This panel should not be span the whole width of the viewport (Browser + Tab). It should be present only under the Tab.',
                    collapsible: true,
                    split:true                
                }
            ]
        });
            
        browseTree = viewPort.findById('browseTree');
        homeNode = browseTree.getNodeById('Node1');
        homeNode.select();
    
        defaulttab = viewPort.findById('Node1');
    }); // End of application
    Here is my question:
    Currently, with this layout the SOUTH panel spans across the entire width of the page (width of the Tree browser + width of the Tab panel). I would like the SOUTH panel to span ONLY across the Tab Panel and NOT across the Tree browser. i.e. The panel should be in the CENTER region below the Tab panel at the bottom.

    This SOUTH panel should be independent of the Tab panel. Even if a new tab is opened, the SOUTH panel should have the same content that was there when the previous tab was active.

    I have attached 3 files (One HTML file and 2 JS files). I have not included ext2.2 folder. Please include it under Layout_files folder when trying to reproduce the issue.

    Thanks
    Attached Files Attached Files
    - K

  2. #2
    Sencha User catacaustic's Avatar
    Join Date
    Jul 2007
    Location
    "A Land Down Under"
    Posts
    618

    Default

    To acheive this you need to embed extra layouts in there.

    What you need to do is set up a border layout area with the south region and the tab panel in the centre region. Then you add that to the main border layout region's centre region and have the north and west regions set up in there.

    That should give you the effect that you're after.
    'Once again, fortune vomits on my eiderdown'
    - Edmund Blackadder

  3. #3

    Default

    Hi catacaustic,
    I do remember trying it out but the whole layout got screwed up. I will try it out again and post it if it does not work. I would appreciate if you could assist me in modifying the posted code to suit the requirements that you mentioned in your email below.

    Thanks
    - K

  4. #4

    Default

    The South panel does not automatically appear at the bottom. I have to manually increase the height of the Tab Panel so that the South panel goes to the bottom. Please assist me on how to specify the South Panel to go to the bottom. Here is the updated code:

    Code:
    {
                    region: 'center',
                    items:[
                        new Ext.TabPanel({
                            id: 'tabs',
                            width:'auto',
                            height: 500,
                            minTabWidth:115,
                            tabWidth:220,
                            resizeTabs: true,
                            enableTabScroll:true,
                            activeTab: 0,
                            items: {
                                title: 'Node1',
                                id: 'Node1',
                                closable:true
                            }
                        }), {
                            title: 'Information',
                            height: 100,
                            minSize: 100,
                            maxSize: 200,
                            html: 'This panel should not be span the whole width of the viewport (Browser + Tab). It should be present only under the Tab.',
                            collapsible: true,
                            split:true
                        }
                    ]                
                }
    - K

  5. #5

    Default

    I was finally able to figure it out based on comments from catacaustic. Here is the code for the center region:

    Code:
              {
                    region: 'center',
                    layout: 'border',
                    items:[{
                            xtype: 'tabpanel',
                            region: 'center',
                            id: 'tabs',
                            width:'auto',
                            height: 'auto',
                            minTabWidth:115,
                            tabWidth:220,
                            resizeTabs: true,
                            enableTabScroll:true,
                            activeTab: 0,
                            items: {
                                title: 'Node1',
                                id: 'Node1',
                                closable:true
                            }
                        }, {
                            region: 'south',
                            title: 'Information',
                            height: 250,
                            html: 'Information',
                            collapsible: true,
                            split:true
                        }
                    ]                
                }
    - K

Posting Permissions

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