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

[jamiem]

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!!

<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>

[jamiem]

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.