Results 1 to 6 of 6

Thread: [Solved] Panel on tab page layout problem - center is under west

  1. #1
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400

    Thumbs up [Solved] Panel on tab page layout problem - center is under west

    Hi,

    I have a layout problem. I want to have a tab page that contains a treePanel in the west and a gridPanel in the centre. The problem is that the centre panel is appearing below the west panel. I originally had the tree and grid directly on a ViewPort - ie no tabs - and it was all working correctly. Now I want to have tabs on the Viewport and the tree and grid on one of the tab pages.

    So, I have cut down the code completely and removed all my testing ideas since none of them worked. The sample below is a ViewPort that contains just one tab page that in turn contains 3 panels - a north, west and centre. When I run that code I get north, west and centre all left aligned down the page in that order.

    I have looked through the docs and forum and am obviously misunderstanding how the layouts work.

    PHP Code:
    Ext.onReady(function(){

        
    // Tab pages for Center panel
        
    var mainTabs = new Ext.TabPanel({
            
    region:'center',
            
    activeTab0,
            
    height:300,
            
    plain:true,
            
    defaults:{autoScrolltrue},
            
    items:[{
                
    title'Links',
                
    items:[
                
                    new 
    Ext.Panel({
                    
    region:'north',
                    
    html'North'
                    
    }),
                    
                    new 
    Ext.Panel({
                    
    region:'west',
                    
    width:'100',
                    
    html'West'
                    
    }),
                    
                    new 
    Ext.Panel({
                    
    region:'center',
                    
    width:'200',
                    
    html'Center'
                    
    })
                    ]
             }] 
    // end mainTabs items
        
    }); // end mainTabs

        // Now just plug the various items into the viewport    
        
    var viewport = new Ext.Viewport({
            
    layout:'border',
            
    items:[mainTabs]
        }); 
    // end of viewport object definition

    }); // end of Ext.onReady function 
    Is there any tutorial or docs that explains how the layouts work in Ext?

    Thanks,
    Murray
    Last edited by murrah; 11 Feb 2008 at 1:17 AM. Reason: Solved

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Your code is assigning the north/west/center regions as tab panels inside the tab.

    You want something more like:

    Code:
    var viewport = new Ext.Viewport(
    {
       layout:'border',
       items:
       [
          {
             region: 'north',
             html: 'north'
          },
    
          {
             region: 'west',
             items: [/*treepanel decl here*/]
          },
    
          {
             region: 'center',
             items: [/*gridpanel declaration here*/]
          }
       ]
    }
    );
    This is probably the most relevant example: http://extjs.com/deploy/dev/examples...t/complex.html

  3. #3
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400

    Default

    Hi Evant,

    Thanks for your quick reply. I may not have been clear enough. What I am trying to do is to have a Viewport that contains a set of tabs in the centre region. On one of those tab pages I want a treePanel in the west and a gridPanel in the centre. So, the nesting goes: Viewport --> Tabpage --> treePanel & gridPanel on that specific tab page.

    On my sample code I have removed all the other tab pages and the tree and the grid so I can test how to layout the tree and grid on a tabpage.

    Thanks again,
    Murray

  4. #4
    Sencha User
    Join Date
    Sep 2007
    Location
    Tulsa, Oklahoma
    Posts
    179

    Default

    Not sure if this is what you had in mind? (TAB 2 Has your Tree and Grid)
    Demo

    HTML Looks like:
    PHP Code:
    <html>

    <
    head>

            <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

            <
    title>Layout Demo</title>

            <
    link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
            <
    link rel="stylesheet" type="text/css" href="/test/forums/desktop.css" />
            <
    link rel="stylesheet" type="text/css" href="/test/forums/windows.css" />

            <
    script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
            <script type="text/javascript" src="/test/forums/mylayout-demo.js"></script>

            <style type="text/css">
                    html, body
                    {
                            font:normal 12px verdana;
                            margin:0;
                            padding:0;
                            //border:0 none;
                            border:none;
                            overflow:hidden;
                            height:100%;
                    }
            </style>
            <script type="text/javascript">
                    Ext.onReady(PanelUI.app.init, PanelUI.app);
            </script>
    </head>


    <body>
    <div id="myDesktop">
    </div>
    </body>

    </html> 
    Javascript looks like (just threw this together from examples):
    PHP Code:

    Ext
    .BLANK_IMAGE_URL '/extjs/resources/images/default/s.gif';

    Ext.namespace('PanelUI');

    PanelUI.app = function()
    {
            return {
                    
    init : function()
                    {
                            
    Ext.QuickTips.init();
    /////////////////////////////////////////////////////
            
    function onAddBtnClick(btn)
            {
                    
    alert('Alert me!');
            }

            var 
    myTree = new Ext.tree.TreePanel(
            {
                    
    id:'im-tree',
                    
    region:'west',
                    
    border:false,
                    
    collapsible:true,
                    
    width:150,
                    
    animate:true,
                    
    split:true,
                    
    title'Online Users',
                    
    loader: new Ext.tree.TreeLoader(),
                    
    rootVisible:false,
                    
    lines:false,
                    
    autoScroll:true,
                    
    tools:
                    [
                            {
                                    
    id:'refresh',
                                    
    on:
                                    {
                                            
    click: function()
                                            {
                                                    var 
    tree Ext.getCmp('im-tree');
                                                    
    tree.body.mask('Loading''x-mask-loading');
                                                    
    tree.root.reload();
                                                    
    tree.root.collapse(truefalse);
                                                    
    setTimeout(function()
                                                    {
                                                            
    // mimic a server call
                                                            
    tree.body.unmask();
                                                            
    tree.root.expand(truetrue);
                                                    }, 
    1000);
                                            }
                                    }
                            }
                    ],
                    
    root: new Ext.tree.AsyncTreeNode(
                    {
                            
    text:'Online',
                            
    children:
                            [
                                    {
                                            
    text:'Friends',
                                            
    expanded:true,
                                            
    children:
                                            [
                                                    {
                                                            
    text:'Jack',
                                                            
    iconCls:'user',
                                                            
    leaf:true
                                                    
    },{
                                                            
    text:'Brian',
                                                            
    iconCls:'user',
                                                            
    leaf:true
                                                    
    },{
                                                            
    text:'Jon',
                                                            
    iconCls:'user',
                                                            
    leaf:true
                                                    
    },{
                                                            
    text:'Tim',
                                                            
    iconCls:'user',
                                                            
    leaf:true
                                                    
    },{
                                                            
    text:'Nige',
                                                            
    iconCls:'user',
                                                            
    leaf:true
                                                    
    },{
                                                            
    text:'Fred',
                                                            
    iconCls:'user',
                                                            
    leaf:true
                                                    
    },{
                                                            
    text:'Bob',
                                                            
    iconCls:'user',
                                                            
    leaf:true
                                                    
    }
                                            ]
                                    },{
                                            
    text:'Family',
                                            
    expanded:true,
                                            
    children:
                                            [
                                                    {
                                                            
    text:'Kelly',
                                                            
    iconCls:'user-girl',
                                                            
    leaf:true
                                                    
    },{
                                                            
    text:'Sara',
                                                            
    iconCls:'user-girl',
                                                            
    leaf:true
                                                    
    },{
                                                            
    text:'Zack',
                                                            
    iconCls:'user-kid',
                                                            
    leaf:true
                                                    
    },{
                                                            
    text:'John',
                                                            
    iconCls:'user-kid',
                                                            
    leaf:true
                                                    
    }
                                            ]
                                    }
                            ]
                    })
            });
            var 
    myGrid = new Ext.grid.GridPanel(
            {
                    
    region:'center',
                    
    border:true,
                    
    border:false,
                    
    animate:true,
                    
    collapsibletrue,
                    
    splittrue,
                    
    autoScrolltrue,
                    
    ds: new Ext.data.Store(
                    {
                            
    reader: new Ext.data.ArrayReader({},
                            [
                                    {
    name'company'},
                                    {
    name'price'type'float'},
                                    {
    name'change'type'float'},
                                    {
    name'pctChange'type'float'},
                                    {
    name'lastChange'type'date'dateFormat'n/j h:ia'}
                            ]),

                            
    /// Static Data for Grid /////
                            
    data:
                            [
                                    [
    '3m Co',71.72,0.02,0.03,'9/1 12:00am'],
                                    [
    'Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
                                    [
    'Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
                                    [
    'American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
                                    [
    'American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
                                    [
    'AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
                                    [
    'Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
                                    [
    'Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
                                    [
    'Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
                                    [
    'E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
                                    [
    'Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
                                    [
    'General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
                                    [
    'General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
                                    [
    'Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
                                    [
    'Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
                                    [
    'Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
                                    [
    'International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
                                    [
    'Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
                                    [
    'JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
                                    [
    'McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
                                    [
    'Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
                                    [
    'Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
                                    [
    'Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
                                    [
    'The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
                                    [
    'The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
                                    [
    'The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
                                    [
    'United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
                                    [
    'Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
                                    [
    'Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
                                    [
    'Walt Disney Company(The Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
                            ]
                    }),
                    
    cm: new Ext.grid.ColumnModel(
                    [
                            new 
    Ext.grid.RowNumberer(),
                            {
                                    
    id:'company',
                                    
    header"Company",
                                    
    width120,
                                    
    sortabletrue,
                                    
    dataIndex'company'
                            
    },
                            {
                                    
    header"Price",
                                    
    width70,
                                    
    sortabletrue,
                                    
    rendererExt.util.Format.usMoney,
                                    
    dataIndex'price'
                            
    },
                            {
                                    
    header"Change",
                                    
    width70,
                                    
    sortabletrue,
                                    
    dataIndex'change'
                            
    },
                            {
                                    
    header"% Change",
                                    
    width70,
                                    
    sortabletrue,
                                    
    dataIndex'pctChange'
                            
    },
                            {
                                    
    header"Last Updated",
                                    
    width95,
                                    
    sortabletrue,
                                    
    rendererExt.util.Format.dateRenderer('m/d/Y'),
                                    
    dataIndex'lastChange'
                            
    }
                    ]),
                    
    viewConfig:
                    {
                            
    forceFit:true
                    
    },
                    
    tbar:
                    [
                            {
                                    
    text:'Add Something',
                                    
    tooltip:'Add a new row',
                                    
    handler:onAddBtnClick,
                                    
    iconCls:'add'
                            
    },
                            
    '-',
                            {
                                    
    text:'Options',
                                    
    tooltip:'Blah blah blah blah',
                                    
    iconCls:'option'
                            
    },
                            
    '-',
                            {
                                    
    text:'Remove Something',
                                    
    tooltip:'Remove the selected item',
                                    
    iconCls:'remove'
                            
    }
                    ]
            });

            var 
    myTabPanel = new Ext.TabPanel(
            {
                    
    activeTab0,
                    
    region'center',
                    
    bodyBorderfalse,
                    
    items:
                    [
                            new 
    Ext.Panel(
                            {
                                    
    title'Tab 1',
                                    
    layout'border',
                                    
    borderfalse,
                                    
    items:
                                    [
                                            new 
    Ext.Panel(
                                            {
                                                    
    title'Inside Tab 1',
                                                    
    region'center',
                                                    
    height100,
                                                    
    width:100
                                            
    })
                                    ]
                            }),
                            new 
    Ext.Panel(
                            {
                                    
    title'Tab 2',
                                    
    layout'border',
                                    
    borderfalse,
                                    
    items:
                                    [
                                            
    myTree,
                                            
    myGrid
                                    
    ]
                            })
                    ]
            });
            var 
    viewport = new Ext.Viewport(
            {
                    
    layout'border',
                    
    items:
                    [
                            new 
    Ext.Panel(
                            {
                                    
    title'North',
                                    
    region'north',
                                    
    collapsibletrue,
                                    
    splittrue,
                                    
    height100
                            
    }),
                            new 
    Ext.Panel(
                            {
                                    
    title'West',
                                    
    region'west',
                                    
    collapsibletrue,
                                    
    splittrue,
                                    
    width100
                            
    }),
                            
    myTabPanel,
                            new 
    Ext.Panel(
                            {
                                    
    title'East',
                                    
    region'east',
                                    
    collapsibletrue,
                                    
    splittrue,
                                    
    width100
                            
    }),
                            new 
    Ext.Panel(
                            {
                                    
    title'South',
                                    
    region'south',
                                    
    collapsibletrue,
                                    
    splittrue,
                                    
    height100
                            
    })
                    ]
            });

            
    viewport.doLayout();

    ///////////////////////////////////////////////////////
                    
    }
            };
    }(); 
    Thanks!
    Chuck

  5. #5
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400

    Default

    Yes, thanks Chuck. That's the layout I wanted. I can now work through your code to see how this layout stuff works.

    Thanks again,
    Murray

  6. #6
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400

    Default SOLVED

    Thanks to Chuck's demo above, here is a skeleton / framework that allows a nested format within a tab page within a ViewPort. You can substitute any other panel descendant in place of the ones nested within the tab panel eg a treePanel or a gridPanel etc.

    PHP Code:
    Ext.onReady(function(){

        
    // Tab pages for Center panel
        
    var mainTabs = new Ext.TabPanel({
            
    bodyBorderfalse,
            
    region:'center'// ie place the tabPanel in the centre region of the ViewPort (below)
            
    activeTab0,
            
    height:300,
            
    plain:true,
            
    defaults:{autoScrolltrue},
            
    items:[
                                
    // A panel to create the first tab page
               
    new Ext.Panel
               
    ({ 
                       
    title:'Tab 1'// The label on the tab
                       
    layout:'border',
                       
    border:false,
                       
                                   
    // These are the items that make up the layout
                                   // that is nested on the first tab page. In this
                                   // case they are basic panels but you could substitute 
                                   // a treePanel or a gridPanel (for example)
                                   // The region specifies where on the parent panel the panel will render
                       
    items
                       [
                        new 
    Ext.Panel({
                        
    region:'north',
                        
    html'North panel contents'
                        
    }),
                        
                        new 
    Ext.Panel({
                        
    region:'west',
                        
    html'West panel contents'
                        
    }),
                        
                        new 
    Ext.Panel({
                        
    region:'center',
                        
    html'Center panel contents'
                        
    }),
                        
                        new 
    Ext.Panel({
                        
    region:'south',
                        
    html'South panel contents'
                        
    })                    
                       ]
               }),
               
                                   
    // A second tab page
               
    new Ext.Panel
               
    ({
                    
    title'Tab 2',
                    
    layout'border',
                    
    borderfalse,
                    
                                
    // The contents of the second tab page.
                                // In this case just another panel
                    
    items:
                    [
                        new 
    Ext.Panel({
                            
    title'Inside Tab 2',
                            
    region'center',
                            
    height100,
                            
    width:100
                        
    })
                    ]
               })           

             ] 
    // end mainTabs items
        
    }); // end mainTabs declaration

        
             // Now just plug the various items into the viewport. In this case just a 
             // north panel for a heading and the tabPanel declared above
             // Remember, there can be only one Viewport component per browser page
        
        
    var viewport = new Ext.Viewport({
            
    layout:'border',
            
    items:
            [
                new 
    Ext.Panel
                
    ({
                    
    title'My heading',
                    
    region'north'// ie this panel goes in the north region of the Viewport
                    
    collapsibletrue,
                    
    splittrue,
                    
    height50,
                    
    html:'Welcome to my site, blah blah'
                
    }),

                
    mainTabs // The previously declared tabPanel
            
    ]
        }); 
    // end of viewport object definition

    }); // end of Ext.onReady function 

Posting Permissions

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