PDA

View Full Version : Help on simple tabs - Ext core 3.0



hyang
23 Jun 2009, 4:21 PM
Hi, I'm new to the Ext and I recently installed the Ext core 3.0 and used the simple tabs on my page, but I don't know how I can link to a specific tab from my other page. Any help is greatly appreciated.

andycramb
24 Jun 2009, 4:37 AM
Are you looking to click on a link from your non-tabbed page that points to a specific tab and when the new page is opened the tab UI defaults or is opened at that tab?

Joe
24 Jun 2009, 5:21 AM
If you go to http://www.josephfrancisart.com/ and view source you will see a function called openTab. This does some additional items you may want to strip out .. but the basics are there.

Here is an untested stripped down version....



//--- Call that allows us to open a tab using javascript. Also called when the tab is clicked.
function openTab(theTab){
var theTab = theTab ? theTab : 'home';
/* Remove the "current" class from all siblings and add to theTab - making it the "current" class */
Ext.fly(theTab).radioClass('tab-current');
Ext.get(theTab + '-body' ).radioClass('tab-content-show');
}


You will see other places in the code where it is called via links ...

... onclick="openTab('photo') ....

If you want to open a specific tab at load time, just call openTab('anytab') and the end of your onReady routine. If you want this to be based on params passed in .. then read the query string and use openTab the same way using the param values as needed.

You may have to look at the design a bit to see if how to integrate with the -body .. been a while since I was in there :) I do tabs different now but since your question is about the ux tab example, this is the best pointer I can provide to that end.

Hope that helps. If not, post where you are at and what you are hitting and we may be able to help.

hyang
24 Jun 2009, 7:38 AM
Yes. I will create a query string on my non-tabbed page (something like /sample.html?tab=content2) . On my tabbed page, I will need to use this query and set my selected tab. In Ext core 3.0, what I need to do to use my query (content2) to change my default tab to tab 2 or tab 3?

Joe
24 Jun 2009, 8:09 AM
When you say "my non-tabbed page (something like /sample.html?tab=content2)" ..
This mean ... the link will open sample.html in the browser and when it opens - on sample.html there is tab panel .. and you want it to jump to tab 2 in that tab panel.

If that is the case:
Do you know how to get that query string value and use it in a function (i.e. just set the value to the innerHTML of an element or even do an alert with the value).

If you do and have the value for JS usage, then you simply need to use that to open the correct tab.

Do you have any sample html/code you can post to illustrate where you are getting hung up?

Joe
24 Jun 2009, 2:34 PM
A working example:

Here are some working links:

Main Page:
http://www.josephfrancisart.com/joe/ImageGallery.nsf/SimpleTab?OpenForm

Tab 2
http://www.josephfrancisart.com/joe/ImageGallery.nsf/SimpleTab?OpenForm&tab=tab2

Tab 3
http://www.josephfrancisart.com/joe/ImageGallery.nsf/SimpleTab?OpenForm&tab=tab3


Here is the code:




function openTab(theTab){
var theTab = theTab ? theTab : 'home';
Ext.fly(theTab).radioClass('tab-current');
Ext.get(theTab + '-body' ).radioClass('tab-content-show');
}

Ext.onReady(function(){
//--- From the Ext JS Core Tree example - modified slightly
Ext.select('#tab-buttons').on('click', function(e, t) {
e.preventDefault();
openTab( t.id );
}, null, {delegate: 'li'});

//--- this opens the main tab or the one passed in the URL
//Found this code in another post
var pageParameters = Ext.urlDecode(window.location.search.substring(1));
openTab(pageParameters.tab || 'tabhome');
//--- scrolling of the inner content is disabled while the page loads to remove the flicker on load
//--- this adds autoscrolling back after page loads
Ext.getDom('tab-inner-content').style.overflow = 'auto'


})


Hope that helps.

hyang
25 Jun 2009, 6:30 AM
Are you looking to click on a link from your non-tabbed page that points to a specific tab and when the new page is opened the tab UI defaults or is opened at that tab?


Joseph,
Thanks so much!! This helps a lot.:)

hello2008
25 Jun 2009, 8:47 AM
good example, Joe ;)

ncesky
30 Jun 2009, 11:46 AM
Has anyone noticed that the example tabs are broken?

http://extjs.com/playpen/ext-core-latest/examples/tabs/

When you load the page, tab1 - Nature - is selected, but no matter what tab you click next, tab3 - Animals - gets highlighted, although the correct content still loads.

I found that in examples/tabs/tabs.js the function uses flyweight to radioClass tab-show to the appropriate tab element. The function works correctly when updated to use Ext.get instead of Ext.fly, but I don't understand what the issue with flyweight is... change line 30:

Ext.fly(t).radioClass('tab-show'); to Ext.get(t).radioClass('tab-show');

Is this a bug with the flyweight method, or is the example just broken? On a similar note, the lightbox examples do not disappear when closed: http://extjs.com/playpen/ext-core-latest/examples/lightbox/

hello2008
1 Jul 2009, 1:25 AM
yes, tabs and lightbox examples broken, also mentioned in another thread http://extjs.com/forum/showthread.php?t=72931

and I have to say the tabs example is too simple to become a single example comparing with others examples...