1. #1
    Ext User
    Join Date
    Nov 2007
    Posts
    15
    Vote Rating
    0
    P76 is on a distinguished road

      0  

    Default Tab activate

    Tab activate


    Maybe another ExtJs newbie question, but I hope someone can help me out.
    I use the following code to generate some dissabled tabpanels:

    Code:
    var TabsExample = {
        init : function(){
            var jtabs = new Ext.TabPanel('jtabs');
    
    		var tab1 = jtabs.addTab('jtabs-1', "Bedrijf");
            var updater = tab1.getUpdateManager();
            updater.setDefaultUrl('ajaxLoadboom.asp');
            tab1.on('activate', updater.refresh, updater, true);
    		jtabs.disableTab('jtabs-1');
    
    		var tab2 = jtabs.addTab('jtabs-2', "Contactpersonen");
            var updater = tab2.getUpdateManager();
            updater.setDefaultUrl('ajaxLoadboom.asp');
            tab2.on('activate', updater.refresh, updater, true);
    		jtabs.disableTab('jtabs-2');
        }
    }
    Ext.EventManager.onDocumentReady(TabsExample.init, TabsExample, true);
    After an (external) event on the page I want to enable the tabs, if I just use jtabs.enableTab('jtabs-2'); the object doesn't get recognized. I assume I have to use enabelTab, but how should I call it?

    Greetz, P

  2. #2
    Ext User
    Join Date
    Nov 2007
    Posts
    15
    Vote Rating
    0
    P76 is on a distinguished road

      0  

    Default Further explanation

    Further explanation


    Maybe I should explain my problem some more.

    As a base I use the example: basic tabs (examples\tabs\tabs.html)
    In this example there's a dissable tab in the bottom panel. I would like to know if it's possible to enable this tab with a href link after the page loads and by a users click?

    I hope someone can help me, cause I really can't seem to figure it out myself.

    Thanks in advance, Patrick

  3. #3
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    The following re-write of the Basic Tabs example should get you started:

    PHP Code:
    var TabsExample = function(){
      var 
    jtabs;
      return{
        
    init : function(){
            
    // basic tabs 1, built from existing content
            
    var tabs = new Ext.TabPanel('tabs1');
            
    tabs.addTab('script'"View Script");
            
    tabs.addTab('markup'"View Markup");
            
    tabs.activate('script');
        
            
    // second tabs built from JS
            
    jtabs = new Ext.TabPanel('jtabs');
            
    jtabs.addTab('jtabs-1'"Normal Tab""My content was added during construction. <a href='javascript:TabsExample.enableTab(4);'>Enable Tab 5</a>");
        
            var 
    tab2 jtabs.addTab('jtabs-2'"Ajax Tab 1");
            var 
    updater tab2.getUpdateManager();
            
    updater.setDefaultUrl('ajax1.htm');
            
    tab2.on('activate'updater.refreshupdatertrue);
        
            var 
    tab3 jtabs.addTab('jtabs-3'"Ajax Tab 2");
            
    tab3.setUrl('ajax2.htm'nulltrue);
        
            var 
    tab4 jtabs.addTab('jtabs-4'"Event Tab");
            
    tab4.setContent("I am tab 4's content. My content was set with setContent() after I was created. I also have an event listener attached.");
            
    tab4.on('activate', function(){
                
    alert('Tab 4 was activated.');
            });
        
            
    jtabs.addTab('tabs1-5'"Disabled Tab""Can't see me cause I'm disabled");
            
    jtabs.disableTab('tabs1-5');
        
            
    jtabs.activate('jtabs-1');
        },
        
        
    enableTab: function(tabIndex){
          
    jtabs.enableTab(tabIndex); // 0-based indexing
          
    jtabs.activate(tabIndex);
        }
      }
    }();
    Ext.EventManager.onDocumentReady(TabsExample.initTabsExampletrue); 

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Give the tab an id, add a click handler to the A tag to call enable on the tab.

    Code:
    Ext.get('somelink').on('click', function() {
     Ext.getCmp('tab5').enable();
    });
    If you don't understand these concepts, I suggest you spend some time reading the tutorials at http://extjs.com/learn

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Bah
    Posts
    434
    Vote Rating
    0
    efege is on a distinguished road

      0  

    Default


    Try this:

    Code:
    var TabsExample = function(){
        var  jtabs;
        return {
            init : function(){
                jtabs = new Ext.TabPanel('jtabs');
                var tab1 = jtabs.addTab('jtabs-1', "Bedrijf");
                var updater = tab1.getUpdateManager();
                updater.setDefaultUrl('ajaxLoadboom.asp');
                tab1.on('activate', updater.refresh, updater, true);
                jtabs.disableTab('jtabs-1');
        
                var tab2 = jtabs.addTab('jtabs-2', "Contactpersonen");
                var updater = tab2.getUpdateManager();
                updater.setDefaultUrl('ajaxLoadboom.asp');
                tab2.on('activate', updater.refresh, updater, true);
                jtabs.disableTab('jtabs-2');
            },
            enableTab : function(tabId) {
               jtabs.enableTab(tabId);
            }
        };
    }();
    
    TabsExample.init();
    TabsExample.enableTab('jtabs-2');
    Note that Tim's suggestion (Ext.getCmp) is not available for Ext 1.x.


    EDIT: I only saw fay's reply after posting mine
    Fernando G

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    15
    Vote Rating
    0
    P76 is on a distinguished road

      0  

    Default


    fay, first of all thanks for your respond, but I've got a problem to get your code to work. If I change the Ext example code with your code I get a DOM error.

    I hope you can help me some more.

    Greetz, Patrick

  7. #7
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    What kind of DOM error? Check the following simplified version of tabs.html (changing the extJS paths of course):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
      <link rel="stylesheet" type="text/css" href="../../ext111/resources/css/ext-all.css" />
        
      <script type="text/javascript" src="../../ext111/adapter/ext/ext-base.js"></script>     
      <script type="text/javascript" src="../../ext111/ext-all-debug.js"></script>  
      
    <script>
    Ext.BLANK_IMAGE_URL = '../../ext111/resources/images/default/s.gif'; 
    
    var TabsExample = function(){
      var jtabs;
      return{
        init : function(){
          jtabs = new Ext.TabPanel('jtabs');
          
          jtabs.addTab('jtabs-1', "Normal Tab", "My content was added during construction. <a href='javascript:TabsExample.enableTab(1);'>Enable Tab 2</a>");
          jtabs.addTab('jtabs-2', "Disabled Tab", "Can't see me cause I'm disabled");
                
          jtabs.disableTab('jtabs-2');        
          jtabs.activate('jtabs-1');
        },
        
        enableTab: function(tabIndex){
          jtabs.enableTab(tabIndex); 
          jtabs.activate(tabIndex);
        }
      }
    }();
    Ext.onReady(TabsExample.init, TabsExample); 
    </script>
    
    <body>
    <div id="jtabs"></div>
    </body>
    </html>

  8. #8
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    Here's another way of doing it - if you don't want to use HREFs, and would like to employ something along the lines of Tim's suggestion:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
      <link rel="stylesheet" type="text/css" href="../../ext111/resources/css/ext-all.css" />
        
      <script type="text/javascript" src="../../ext111/adapter/ext/ext-base.js"></script>     
      <script type="text/javascript" src="../../ext111/ext-all-debug.js"></script>  
     
    <style type="text/css">
    .pseudolink 
    {
      color: #366ab3; 
      cursor: pointer
    }
    
    .pseudolink:hover 
    {
      color: red; 
      text-decoration: underline
    }
    </style> 
     
    <script>
    Ext.BLANK_IMAGE_URL = '../../ext111/resources/images/default/s.gif'; 
    
    var TabsExample = function(){
      var jtabs;
      return{
        init : function(){
          jtabs = new Ext.TabPanel('jtabs');
          
          jtabs.addTab('jtabs-1', "Normal Tab", "My content was added during construction. <span id='t2' class='pseudolink' enableTabId='jtabs-2'>Enable Tab 2</span>");    
          jtabs.addTab('jtabs-2', "Disabled Tab", "Can't see me cause I'm disabled");     
          
          jtabs.disableTab('jtabs-2');        
          jtabs.activate('jtabs-1');
    
          Ext.get('t2').on('click', function(e){ 
            TabsExample.enableTab(e.target.attributes.getNamedItem('enableTabId').value);
          });      
        },
        
        enableTab: function(tabId){
          jtabs.enableTab(tabId); 
          jtabs.activate(tabId);
        }
      }
    }();
    Ext.onReady(TabsExample.init, TabsExample); 
    </script>
    
    <body>
    <div id="jtabs"></div>
    </body>
    </html>
    Last edited by fay; 23 Nov 2007 at 12:18 PM. Reason: EDIT: Had included yui-adapter instead of ext-base.js!

  9. #9
    Ext User
    Join Date
    Nov 2007
    Posts
    15
    Vote Rating
    0
    P76 is on a distinguished road

      0  

    Default


    Works great, thank you all for the effort!
    One headache less!

    Greetings, Patrick

Thread Participants: 3