1. #1
    Ext User
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
    hyang is on a distinguished road

      0  

    Question Unanswered: Help on simple tabs - Ext core 3.0

    Unanswered: Help on simple tabs - Ext core 3.0


    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.

  2. #2
    Sencha User
    Join Date
    Apr 2008
    Location
    West Linton, Scotland
    Posts
    244
    Vote Rating
    0
    andycramb is on a distinguished road

      0  

    Default


    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?

  3. #3
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default openTab

    openTab


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

    Code:
    //--- 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 ...
    HTML Code:
    ... 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.
    Joseph Francis,
    CoreLan / Meeting Consultants

  4. #4
    Ext User
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
    hyang is on a distinguished road

      0  

    Default


    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?

  5. #5
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default To be sure ...

    To be sure ...


    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?
    Joseph Francis,
    CoreLan / Meeting Consultants

  6. #6
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default Here is a working example ....

    Here is a working example ....


    A working example:

    Here are some working links:

    Main Page:
    http://www.josephfrancisart.com/joe/...leTab?OpenForm

    Tab 2
    http://www.josephfrancisart.com/joe/...nForm&tab=tab2

    Tab 3
    http://www.josephfrancisart.com/joe/...nForm&tab=tab3


    Here is the code:


    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.
    Joseph Francis,
    CoreLan / Meeting Consultants

  7. #7
    Ext User
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
    hyang is on a distinguished road

      0  

    Default


    Quote Originally Posted by andycramb View Post
    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.

  8. #8
    Sencha User
    Join Date
    Dec 2007
    Posts
    167
    Vote Rating
    0
    hello2008 is on a distinguished road

      0  

    Default


    good example, Joe

  9. #9
    Ext User
    Join Date
    Jun 2007
    Posts
    2
    Vote Rating
    0
    ncesky is on a distinguished road

      0  

    Default


    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-la...ples/lightbox/

  10. #10
    Sencha User
    Join Date
    Dec 2007
    Posts
    167
    Vote Rating
    0
    hello2008 is on a distinguished road

      0  

    Default


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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar