PDA

View Full Version : tabs update



KuN
24 Oct 2006, 1:58 PM
My problem is that i have such tabs:


tabs = new YAHOO.ext.TabPanel('main');
tabs.addTab('home', "Home");
tabs.getTab('home').setContent('home');
tabs.activate('home');


and this func



toggleTab : function(type, title, link, params){
if (!tabs.getTab(type))
{
tabs.addTab(type, title);
tabs.getTab(type).setUrl(link, params);
tabs.activate(type);
}
else if (tabs.getTab(type).text != title)
{
tabs.getTab(type).setText(title);
tabs.getTab(type).setUrl(link, params);
tabs.activate(type);
}
else if (tabs.getTab(type) != tabs.getActiveTab() && (tabs.getTab(type).text == title))
{
tabs.getTab(type).setText(title);
tabs.activate(type);
}
}

it add's tabs if there is no such type of tab. if there is one then it changes it text (via setText()) and changes url.

so i have 2 links:
toggleTab('test', 'test1', '/test1');
toggleTab('test', 'test2', '/test2');

so when i click to each of them it should change the text and refresh the content, but it create the tab then it changes its text on second link and when i click the first one it doest change the text while getTab().text shows that the text was changed.

my steps and output:
click link 1 > create tab, set text to 'test1', open url '/test1'
click link 2 > change text to 'test2', open url '/test2',
click link 1 > visionally text doesnt change, getTab.text changes, url doest open
click link 2 many times > url open each time if it is changed tab

...

have any thoughts ?
thanks

jay@moduscreate.com
24 Oct 2006, 2:28 PM
hey dude, i know that his examples w/ the tabs & grid show how to refresh data.

tabs1_results.onActivate.subscribe(function(){
... your function to refresh the data (get url/etc).
});

jack.slocum
24 Oct 2006, 5:26 PM
Calling setText() doesn't change the private 'text' property. It should though, so I have made that change. until the next release, you can update that variable manually after calling setText().

addTab() will return the tab, so you should change:



tabs.addTab(type, title);
tabs.getTab(type).setUrl(link, params);
tabs.activate(type);


to:



var tab = tabs.addTab(type, title);
tab.setUrl(link, params);
tab.activate();


setUrl() was created as a shortcut function that subscribes to the tab's onActivate event to automatically handle the UpdateManager code for you. In the current implementation, if you call it more than once it will be subscribed more than once and each activate will trigger multiple ajax update calls. Since I can't imagine any instance where this would be desirable, I've changed it to allow it to be more user friendly. You can use it as you are trying to in the next release. In the meantime, this patch can be used (include it after yui-ext.js):



YAHOO.ext.TabPanelItem.prototype.setUrl = function(url, params, loadOnce){
if(this.refreshDelegate){
this.onActivate.unsubscribe(this.refreshDelegate);
}
this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
this.onActivate.subscribe(this.refreshDelegate);
};


The next release of tabs has some other useful stuff as well.

As dj said, the preferred way to do anything complex with the tabs is to subscribe to onActivate and use it's getUpdateManager() to make updates.

KuN
25 Oct 2006, 2:17 AM
thanx Jack,
changed setUrl to your code and added one line:


setUrl:function(url, params, loadOnce){
if(this.refreshDelegate){
this.onActivate.unsubscribe(this.refreshDelegate);
this.loaded = false;
}
this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
this.onActivate.subscribe(this.refreshDelegate);
}

if there's no 'this.loaded = false' then it doesn't openurl at all.


one more question, i have onclick and ondblclick on links and if i click then browser fires both onclick and ondblclick events. is there any possibility to catch only one of them ?

KuN
25 Oct 2006, 2:48 AM
solved it out by modifyuing onclick and ondblclick event to:



toggleClick: function (typo, title, link, params, force){
setTimeout("ST.toggleGo('" + typo + "', '" + title + "', '" + link + "', '" + params + "', false)", 1200);
},
toggleGo: function (type, title, link, params, force){
if (!checkerTab)
{
clickedTab = true;
ST.toggleTab(type, title, link, params, false);
clickedTab = false;
}
checkerTab = false;
},
toggledblClick: function (type, title, link, params, force){
clickedTab = true;
checkerTab = true;
ST.toggleTab(type, title, link, params, true);
clickedTab = false;
},
toggleTab: function(type, title, link, params, force){
if (clickedTab)
{
var lengthTab = openTabs[type].length - 1;
var thisTab = openTabs[type][lengthTab];
if (typeof(thisTab) == 'undefined' || force)
{
lengthTab++;
var newTab = tabs.addTab(type + lengthTab, title);
newTab.setUrl(link, params, true);
newTab.activate(type + lengthTab);
openTabs[type][lengthTab] = newTab;
}
else if (thisTab.text != title)
{
thisTab.text = title;
thisTab.setText(title);
thisTab.setUrl(link, params, true);
tabs.activate(type + lengthTab);
}
}
}


it seems to be to be the only way to do that