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

[mark0978]

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.

[findajit]

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:

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

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
         }
});

[mark0978]

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

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:

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

[zakif]

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:

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]
                }

[mark0978]

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.

[koko2589]

tray this

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

T.setActiveTab('yoru id');
}
}, '-', {

[zakif]

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:

{
                    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]
                }