1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    251
    Vote Rating
    -6
    Answers
    7
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default Answered: Links in one tab panel that take me to another tab panel

    Answered: Links in one tab panel that take me to another tab panel


    I have an app with 5 panels. The first panel is some text that talks about how to use the app and includes links to take you to the tab that is being discussed. With JQuery I could just capture the $("a.clsName") and put an onclick on them to do this kind of thing.

    Is there something similar to use for extjs?

    I know about setActiveTab, but I don't know who to capture the click on the link in extjs. The Text is remotely loaded and subject to change, and the links are interspersed in the text, so it really seems like a job for a link "hijacking".

    Yes, I do know they could just click the tabs at the top to move from panel to panel.

  2. Hi Mark,

    You can follow these steps to achieve the desired outcome:
    1. Create a, say <a> tag and add it as an item to panel 1. Now, to this <a> you add an id attribute which contains the id of the tab to which this link shall point to. Say, the id="source-23-target-56" where 23 is the id of the current tab/panel and 56 is the id of the tab we want to switch to. You may get the id of the panel/tab by calling the getId() method on the panel/tab. Additionally, add the class attribute to the <a> which you would use to style the link. Say, we set class="pathway". So, effectively your <a> tag will look something like this:
      Code:
      <a id="source-23-target-56" class="pathway" href="">Employee</a>
    2. Now, handle the click event on the panel, to which you would have added the link, as shown below:
    Code:
    panel.body.on("click", function(e, t){
             var t = e.getTarget('.pathway');    //see if the event target contains pathway - our link
             if (!Ext.isEmpty(t)) {
                    e.stopEvent();
    
                    var ids = t.id.split('-');
                    var l = ids.length;
                    var targetTabId = ids[l-1];      //get the target tab id
    
                    panel.setActiveItem(targetTabId);    //set the active item on the tab panel
             }
    });

  3. #2
    Sencha Premium Member findajit's Avatar
    Join Date
    Mar 2009
    Location
    Hyderabad, India
    Posts
    62
    Vote Rating
    0
    Answers
    6
    findajit is on a distinguished road

      0  

    Default


    Hi Mark,

    You can follow these steps to achieve the desired outcome:
    1. Create a, say <a> tag and add it as an item to panel 1. Now, to this <a> you add an id attribute which contains the id of the tab to which this link shall point to. Say, the id="source-23-target-56" where 23 is the id of the current tab/panel and 56 is the id of the tab we want to switch to. You may get the id of the panel/tab by calling the getId() method on the panel/tab. Additionally, add the class attribute to the <a> which you would use to style the link. Say, we set class="pathway". So, effectively your <a> tag will look something like this:
      Code:
      <a id="source-23-target-56" class="pathway" href="">Employee</a>
    2. Now, handle the click event on the panel, to which you would have added the link, as shown below:
    Code:
    panel.body.on("click", function(e, t){
             var t = e.getTarget('.pathway');    //see if the event target contains pathway - our link
             if (!Ext.isEmpty(t)) {
                    e.stopEvent();
    
                    var ids = t.id.split('-');
                    var l = ids.length;
                    var targetTabId = ids[l-1];      //get the target tab id
    
                    panel.setActiveItem(targetTabId);    //set the active item on the tab panel
             }
    });
    My Book on Sencha Touch - Sencha Touch Cookbook (2nd Edition)
    My older book on Sencha Touch - Sencha Touch Cookbook
    My Sencha Touch Blog - Walking Tree Sencha Touch Blog
    My ExtJS Blog - Walking Tree ExtJS Blog

    Buy ExtJS Components from - Walking Tree e-Store

  4. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    251
    Vote Rating
    -6
    Answers
    7
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default


    This is how I made it all work in the end. I needed setActiveTab instead of setActiveItem since it was a tab panel.

    Code:
    listeners: {
    		afterrender: function(me, eOpts) {
    
    
    			me.body.on("click",  function(evt, t) {
    				var target = evt.getTarget('.pathway');
    				console.log("Click");
    				if(!Ext.isEmpty(target)) {
    					evt.stopEvent();
    					var ids = target.id.split('_');
    					Ext.getCmp('app-tabs').setActiveTab(ids[ids.length-1]);
    				}
    			});
    		}
    }
    And the link looks like:
    Code:
    <a href='#' id='link-to_today-tab' class='pathway'>Clickable Text</a>
    Each of my tabs has an id, so it all worked out really well. Thanks.

  5. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    49
    Vote Rating
    0
    zakif is on a distinguished road

      0  

    Default Same Problem

    Same Problem


    Dear mark & findajit,

    I have the same problem. But I still can't replicate your solution.

    The following code is inside js / layout folder (on grouptabpanel.js). While the related grid (language_grid) is contained inside js folder (on language_grid.js.php).

    How to solve that? Any advices and solution will be really really appreciated.

    Best regards,
    zaki

    Here are the codes:

    Code:
    var viewport = new Ext.Panel({
            layout        : 'fit',
            renderTo    : 'content',
            title       : 'The Title of Panel', 
            collapsible : false, 
            autoHeight: true,
            items:[ 
                     {
                xtype: 'grouptabpanel',
                tabWidth: 200,
                activeGroup: 6,
                items: [
                {
                    expanded: true,
                    items: [
                             {
                        xtype: 'portal',
                        title: 'Configuration',
                        autoHeight: true,
                        html: '<a onclick="#lang"> Go to Language Sub-menu</a>'
                        
                    },{
                        title: 'Language',
                        layout: 'fit',
                        ref: '#lang',
                        iconCls: 'x-icon-tickets',
                        style: 'padding: 10px;',
                        items:[languages_grid]
                    }

  6. #5
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    251
    Vote Rating
    -6
    Answers
    7
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default


    I don't think you looked at my "How I made it work" response. I don't see you setting the active tab, you see to be trying to rely on the html part to do it all.

  7. #6
    Sencha User
    Join Date
    Mar 2009
    Posts
    356
    Vote Rating
    0
    Answers
    1
    koko2589 is on a distinguished road

      0  

    Default


    tray this

    handler: function () {
    var T = Ext.getCmp('Tabs id');

    T.setActiveTab('yoru id');
    }
    }, '-', {
    my ext js site
    http://www.itoto4.com/

  8. #7
    Sencha User
    Join Date
    Jul 2011
    Posts
    49
    Vote Rating
    0
    zakif is on a distinguished road

      0  

    Default Thanks

    Thanks


    Quote Originally Posted by mark0978 View Post
    I don't see you setting the active tab, you see to be trying to rely on the html part to do it all.
    Thanks a lot for your reply, Mark.

    Actually I have tried the solution as below.

    But I still confused, how to define <a> on items of Configuration except through html ? Where to add class="pathway"? Where to put 'source'+getId('config')+'target'+getId('language') or how to utilize the id / itemId? What is var ids = target.id.split('_'); for ? Is 'app-tabs' the id of target tabpanel or 'language' in my case? Where do I should put the listener, on Configuration or Language tabpanel?

    Thanks in advance.

    Here are the code that I've tried:

    Code:
    {
                        xtype: 'portal',
                        title: 'Configuration',
                        tabTip: 'Dashboard tabtip',
                        autoHeight: true,
                        id: 'config',
                        items:
                            {
                                html: '<a id="source-config-target-language" class="pathway" href="">Go to Language</a>'
                            },
                        listeners: {
                                afterrender: function(me, eOpts) {
                                    me.body.on("click",  function(evt, t) {
                                        var target = evt.getTarget('.pathway');
                                        console.log("Click");
                                        if(!Ext.isEmpty(target)) {
                                            evt.stopEvent();
                                            var ids = target.id.split('_');
                                            Ext.getCmp('tabstreet').setActiveTab(ids[ids.length-1]);
                                        }
                                    });
                                }
                        }
                        
                    },{
                        title: 'Language',
                        itemId: 'language',
                        layout: 'fit',
                        id: 'language',
                        iconCls: 'x-icon-tickets',
                        tabTip: 'Language tabtip',
                        style: 'padding: 10px;',
                        items:[languages_grid]
                    }