Results 1 to 2 of 2

Thread: Help assigning setUrl to a group of links which load a html file into its own tab

  1. #1
    Ext User
    Join Date
    Sep 2007
    Posts
    16
    Vote Rating
    0
      0  

    Default Help assigning setUrl to a group of links which load a html file into its own tab

    Apologies for my lack of knowledge, but think this would make a good tutorial or example for other coders starting out with ext.

    What I want to achieve is to have a number of links which each load its referenced url into a new tab (TabPanel) and set the tab title based on the a elements title.

    To start with I have got a viewport/layout with north, west, center, east and south regions.

    In the west region I have used the layout:accordion with three items
    and inside each accordion item I have three or four links.

    So the bit of code I would like help with is getting all <a> elements which are children of west-panel.items to add a new tabPanel item to the center region, set the tab title and load the content(url) when clicked.

    Thanks - Ext 2.0 is so exciting!!

    HTML Code:
    <script>
         Ext.onReady(function(){
    
                Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
            
              var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                    new Ext.BoxComponent({ // raw
                        region:'north',
                        el: 'north',
                        height:72,
                        margins:'5 5 5 5'
                    }),{
                        region:'south',
                        contentEl: 'south',
                        split:true,
                        height: 72,
                        minSize: 72,
                        maxSize: 200,
                        collapsible: true,
                        margins:'0 5 5 5'
                    }, {
                        region:'east',
                        title: 'Help',
                        collapsible: true,
                        split:true,
                        width: 225,
                        minSize: 175,
                        maxSize: 400,
                        layout:'fit',
                        margins:'0 5 0 0',
                        items:
                            new Ext.TabPanel({
                                border:false,
                                activeTab:0,
                                tabPosition:'bottom',
                                items:[{
                                    html:'<p>This region will provide help to the user.</p>',
                                    title: 'Search',
                                }]
                            })
                     },{                    region:'west',
                        id:'west-panel',
                        title:'Navigation',
                        split:true,
                        width: 200,
                        minSize: 175,
                        maxSize: 400,
                        collapsible: true,
                        margins:'0 0 0 5',
                        layout:'accordion',
                                            defaults: {
                                                // applied to each contained panel
                                                bodyStyle: 'padding:5px 10px'
                                            },
                                            layoutConfig:{
                                                animate:true
                                            },
                                            items: [{
                                                    contentEl: 'catalog_manager',
                                                    title:'Catalog Manager',
                                                    border:false,
                                                    iconCls:'catalog_manager',
                                            },{
                                                    contentEl: 'orders_manager',
                                                    title:'Orders Manager',
                                                    border:false,
                                                    iconCls:'orders_manager'
                                            }]
                    },
                    new Ext.TabPanel({
                        region:'center',
                        deferredRender:false,
                        activeTab:0,
                        items:[{
                            contentEl:'center_1',
                            title: 'Dashboard',
                            closable:true,
                            autoScroll:true
                        },{
                            contentEl:'center_2',
                            title: 'Web Browser',
                            autoScroll:true
                        }]
                    })
                 ]
            });
        });
      </script>
    
    <body>
      <div id="west">
        <div id="catalog_manager">
            <a href="/page1.html" title="Page 1">Page 1</a>
            <a href="/page2.html" title="Page 2">Page 2</a>
        </div>
        <div id="orders_manager">
            <a href="/page3.html" title="Page 3">Page 3</a>
            <a href="/page4.html" title="Page 4">Page 4</a>
        </div>
      </div>
    </body>

  2. #2
    Ext User
    Join Date
    Sep 2007
    Posts
    16
    Vote Rating
    0
      0  

    Default Dynamically Adding tabs

    I have found a forum post on how to add the tabs dynamically here for anyone interested. Need to check it works in ext 2.0 and then write code to call the 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
  •