PDA

View Full Version : Links in one tab panel that take me to another tab panel



mark0978
9 Jan 2012, 4:37 PM
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
9 Jan 2012, 9:23 PM
Hi Mark,

You can follow these steps to achieve the desired outcome:

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>
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
11 Jan 2012, 10:41 AM
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
2 May 2012, 2:24 AM
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
2 May 2012, 3:42 AM
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
2 May 2012, 9:26 AM
tray this

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

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

zakif
2 May 2012, 7:32 PM
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]
}