1. #1
    Ext User
    Join Date
    Sep 2007
    Posts
    16
    Vote Rating
    0
    jamiem is on a distinguished road

      0  

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

    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
    jamiem is on a distinguished road

      0  

    Default Dynamically Adding tabs

    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.