PDA

View Full Version : Add Tabs Dynamically link from table



mjfigur
13 Jun 2011, 9:14 PM
All,

I have table with an image inside of an ExtJs TabPanel. I have read books on how to create buttons to add a tab, however in this case I need to add a tab and follow the link that is tied to the image inside of the table.

So for instance here is the code that I used to create the tab-panel:


var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
xtype: 'tabpanel',
margins: '22 5 5 0',
enableTabScroll: true,
activeItem: 0,
plugins: new Ext.ux.TabCloseMenu(),
border: true,
defaultType: 'iframe',
defaults: {
closable: true, layout:'fit', autoScroll: true
},
items: [{
xtype: 'panel',
closable: false,
title: 'MHA Guidelines',
contentEl: 'wwvFlowForm'

}]
};

And for instance I have an image of a book inside of the table and its href = "www.google.com". I just cannot figure out how to write or call a function that would add a tab when the image is clicked.

Thank you in advance.

skirtle
16 Jun 2011, 8:22 AM
Something like this perhaps?


new Ext.TabPanel({
activeTab: 0,
height: 300,
renderTo: Ext.getBody(),
width: 600,
items: {
title: 'Main Tab',
html: [
'<a href="http://www.google.com/">',
'<img src="http://www.google.co.uk/images/logos/ps_logo2.png" />',
'</a>',
'<a href="http://www.yahoo.com/">',
'<img src="http://l.yimg.com/a/i/ww/met/yahoo_logo_uk_102610.png" />',
'</a>'
].join(''),
listeners: {
afterrender: function(tab) {
var tabPanel = tab.ownerCt;

// Loop over all the HTML <a> tags in the tab's body
Ext.each(tab.body.query('a'), function(anchor) {
var anchorEl = Ext.fly(anchor);
var href = anchorEl.getAttribute('href');

anchorEl.on('click', function(ev) {
// Prevent clicking the link from jumping to the href
ev.preventDefault();

// Create a new tab
var tab = tabPanel.add({
closable: true,
html: 'Clicked on: ' + Ext.util.Format.htmlEncode(href),
title: 'New Tab'
});

// Switch to the new tab
tabPanel.activate(tab);
});
});
}
}
}
});

However, if I were doing something like this myself I wouldn't use pre-existing markup. I'd probably just use BoxComponent to create each image and add the links directly to the listeners, not in the href.

mjfigur
20 Jun 2011, 6:36 AM
Thank you so much I never thought to look at the BoxComponent. Thank you again for this solution.