PDA

View Full Version : Ajax tab and reload content



ziorufus
9 Jul 2010, 12:19 PM
Hallo!

I have a trouble with tabs. When I put more than one tab and I switch between them, I need to refresh each time I do it. For example, there are two tabs, named "one" and "two", both loaded from ajax.
When I click the "one" tab, the content is dinamically loaded from the server. Then I click "two" and the program loads the its content from the server. Then I click "one" again, and my need is to ask again to the server to load content (that may be changet in the meantime).

Thanks
Alessio

Condor
9 Jul 2010, 11:16 PM
Write a tabchange event handler for the tabpanel or an activate event handler for every tabitem that loads the body of the tabitem.

ziorufus
10 Jul 2010, 12:14 AM
Hi!
Thank you for your answer. I fount the following solution:



{
region: 'center',
margins: '5 0',
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: "My grid",
layout: "fit",
listeners: {
activate: function(panel) {
activatePanel1(panel);
}
}
},
{
title: "My tree",
listeners: {
activate: function(panel) {
activatePanel2(panel);
}
}
}
]
},
with the function:



function activatePanel2(panel) {
var tree = new Ext.tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
dataUrl: 'ext.tree.php?action=get_tree',
root: {
nodeType: 'async',
text: '[root]',
draggable: false,
id: 'root'
}
});

panel.removeAll();
panel.add(tree);
panel.doLayout();
}

That work for me.
Is there a better solution in which I can put my code in the definition of the TabPanel and then fire something like "refresh" or "reload" in the listener and it repeats the same code again?

Thanks
Alessio

Condor
10 Jul 2010, 12:17 AM
Why destroy the tree and create it again? Why not use the tree as tabitem directly (no need for the extra panel) and only reload the root node on tab activate?