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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi