PDA

View Full Version : Tab panel with check box in tab title



asp3ctus
9 Apr 2010, 4:55 AM
I was wondering if it is possible to put a check box on the Tab it self ....

It would be very useful to select needed tabs as they represent some data.

Thanks.:D

asp3ctus
10 Apr 2010, 2:20 AM
Just a bump )))) looks like not a lot of people seen it ))

asp3ctus
10 Apr 2010, 7:03 AM
I have read source code and got to

new Ext.TabPanel({
renderTo: document.body,
minTabWidth: 115,
tabWidth: 135,
enableTabScroll: true,
width: 600,
height: 250,
defaults: {autoScroll:true},
itemTpl: new Ext.XTemplate(
'<li class="{cls}" id="{id}" style="overflow:hidden">',
'<tpl if="closable">',
'<a class="x-tab-strip-close"></a>',
'</tpl>',
'<a class="x-tab-right" href="#" style="padding-left:6px">',
'<em class="x-tab-left">',
'<span class="x-tab-strip-inner">',
'<img src="{src}" style="float:left;margin:3px 3px 0 0">',
'<span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}</span>',
'</span>',
'</em>',
'</a>',
'</li>'
),
getTemplateArgs: function(item) {
// Call the native method to collect the base data. Like the ID!
var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);

// Add stuff used in our template
return Ext.apply(result, {
closable: item.closable,
src: item.iconSrc,
extra: item.extraText || ''
});
},
items: [{
title: 'New Tab 1',
iconSrc: '../shared/icons/fam/grid.png',
html: 'Tab Body 1',
closable: true
}, {
title: 'New Tab 2',
iconSrc: '../shared/icons/fam/grid.png',
html: 'Tab Body 2',
extraText: 'Extra stuff in the tab button'
}]
});

I have modified it to create a div element next to title and assigned an id to it and then i manually called
new Ext.form.ComboBox({renderTo: 'idCreated'});

And it worked .. it got rendered in tab panel as i wanted, but i ran into problem that it will not get checked .... if i click on it the tab would just become active ....

For my app this is very good solution to use check box in tab ....

I have scratched that idea since i din't get any help on it ... so i just modified TabCloseMenu plugin to make my own menu ... which will be a work around for now, since i don't have much time to mess around with this...

If some one could lead me how to make this checkbox checkable
Sorry that i din't post code i made ... i have tested it in console and i din't save it .. but i can easily replicate it ....

I think it can make a nice pluging for Tab panel ....

hope some one could lead me on :D