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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar