PDA

View Full Version : 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
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.


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:



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

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.


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:


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

Silent79
26 Nov 2007, 2:38 PM
Doug :

You are a life saver. that example works perfect and I really understand now how that works. thanks for your iframe example and your hard work to help out on the forums.

Like i said I work better off examples and now I can even dig deeper into your solution.

again thanks.

JeffHowden
26 Nov 2007, 3:44 PM
panel.body.dom.src = 'www.msn.com';


Does that really work with the omission of "http://" from the URL?

hendricd
26 Nov 2007, 3:54 PM
Likely not. I was in a bit of a hurry, (when the wife screams dinner, she means it !)