activate event

**Silent79** · 26 Nov 2007 12:52 PM

How would I go about leaving the src attribute off your markup and setting it in a handler for the tab's activate event. How would you do it in a render handler.

I have tabs and need loaded when tab is clicked.

**hendricd** · 26 Nov 2007 1:13 PM

Code:

 vat tp=new Ext.Panel({
      ......
     ,listeners:{render:function( panel) {
            Ext.get('someElement').dom.src= ???
       }
       ,activate: function(panel){
            Ext.get('someElement').dom.src= ???
       }
    });

**Silent79** · 26 Nov 2007 1:17 PM

thanks , I am going to give this a shot, do I need to call anything from the item.

Code:

 contentEl:'5',
           title: 'Administration',
	   layout:'fit',
          autoScroll:true
                    }

like handler: or activate:

thanks for the reply.

**hendricd** · 26 Nov 2007 1:21 PM

If you want all the TP panels to do that, then just add the listeners to the tabPanels defaults for items:

Code:

var tp = new Ext.TabPanel({
    ..........
   deferredRender:false,
   defaults:{listeners:{render:function( panel) {
                                  Ext.get('someElement').dom.src= ???
                            },activate: function(panel){
                                  Ext.get('someElement').dom.src= ???
                             }},
  items:[panel1, panel2  ]

});

**Silent79** · 26 Nov 2007 1:47 PM

I have been going crazy for some days now trying to get this to work, all though I have learned a lot I can not pin down how to make my code work.

Is there a working example out there of tabs that load the page when clicked. i know the snipits of code to put in, but I am having problems on piecing it together. I learn off examples better.

I think I need to see a working example so I can change the code around, that is my best way of learning, then I can mess with that code,
Thanks

**hendricd** · 26 Nov 2007 1:54 PM

What are putting in those panels that requires a src=??

Post some code! It's dark in here.

**Silent79** · 26 Nov 2007 2:03 PM

I am putting IFrames in the tab panel, for that is the only way I have successfully loaded data to the full page within the tab, I even used your ux example, but I know my tabs are loading once the site is active cause the third tab loads a page that requires a password and that password notification is loading before the first tab loads. I can post my code but it is just a normal tab lay out with divs and iframes. I would like to see some new code to learn a new correct way to go about this. but i will post mine if necessary.

**hendricd** · 26 Nov 2007 2:08 PM

Post one of your panel configs with an iframe in it, and we'll go from there (using the ux.ManagedIframe, it's really simple)

**Silent79** · 26 Nov 2007 2:08 PM

HTML Code:

<html>
<body>

       <div id="msn" class="x-hide-display">
        <iframe  src="msn.com" height="100%" width="100%" scrolling="auto"></iframe>
        </div>
        <div id="yahoo" class="x-hide-display">
           <iframe  src="yahoo.com" height="100%" width="100%" scrolling="auto"></iframe>
        </div>
		<div id="google"  class="x-hide-display">
         <iframe src="google.com" height="100%" width="100%" scrolling="auto"></iframe>
        </div>
	</body>
</html>

js.

Code:

 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:106
                }),{
                    region:'south',
                    contentEl: 'south',
                    split:true,
                    height: 20,
                    minSize: 20,
                    maxSize: 20,
                    
                    margins:'0 0 0 0'
                },
               
                new Ext.TabPanel({
                    region:'center',
                    deferredRender:true,
                    activeTab:0,
                    items:[{
                        contentEl:'msn',
                        title: 'msn',
			layout:'fit',
			autoScroll:true
                    },
					{
                        contentEl:'yahoo',
                        title: 'yahoo',
			layout:'fit',
                        autoScroll:true,
                    },{
                        contentEl:'google',
                        title: 'google',
			layout:'fit',
                        autoScroll:true
                    }]
                })
             ]
        });
		
    });

and i need each tab to load once clicked

**hendricd** · 26 Nov 2007 2:22 PM

What you have will work just fine, but leave off the src="msn.com" in the markup, it won't load anything until you set it later (on activate):

And, contentEl element gets written to the Panels body during rendering. So for an Iframe (as contentEl), DO NOT use panel.body.update('sometext') or you'll wipe out your iframe.

Code:

 new Ext.TabPanel({
                    region:'center',
                    deferredRender:false,
                    activeTab:0,
                    defaults:{listeners:{
                            activate: function(panel){
                                  panel.body.child('iframe').dom.src= panel.panelUrl;
                             }
                            ,beforedestroy:function(panel){
                                  panel.body.child('iframe').dom.src= '';  //IE Iframe Mem cleanup
                           }                             
                        }},
                    items:[{
                        contentEl:'msn',
                        title: 'msn',
                        layout:'fit',
                         panelUrl:'http://www.msn.com",  //give each panel a src target for use later 
            autoScroll:true
                    },
                    {
                        contentEl:'yahoo',
                        title: 'yahoo',
            layout:'fit',
                        autoScroll:true,
                    },{
                        contentEl:'google',
                        title: 'google',
            layout:'fit',
                        autoScroll:true
                    }]
                })

ux.managedIFrame allows the panel.body to become a writable body and allows:

Code:

panel.body.dom.src = 'http://www.msn.com'; 
or
panel.body.update('<h1>Please Stand By.<\/h1>');

activate event

Thread Tools

Search Thread

Display

activate event

activate event