PDA

View Full Version : Ext.ux.ButtonTabPanel - A tab panel with a button at the end of the tab items strip



JamesC
21 Jun 2008, 5:36 PM
Simple addon that just adds a button onto the end of the tab items:



Ext.namespace("Ext.ux");

Ext.ux.ButtonTabPanel = Ext.extend(Ext.TabPanel, {

onRender : function(ct, position) {
Ext.ux.ButtonTabPanel.superclass.onRender.apply(this, arguments);
var butEl = this.edge.insertSibling({
tag: "li"
});
new Ext.Button(Ext.apply({
renderTo: butEl
}, this.button));
},

findTargets : function(e) {
var item = null;
var itemEl = e.getTarget("li", this.strip);
if (itemEl) {
item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
if (item && item.disabled) {
return {
close : null,
item : null,
el : null
};
}
}
return {
close : e.getTarget(".x-tab-strip-close", this.strip),
item : item,
el : itemEl
}
}
});

Ext.reg("buttontabpanel", Ext.ux.ButtonTabPanel);


Usage like a normal tab panel but you add a button config on like so:



new Ext.ux.ButtonTabPanel({
activeTab: 0,
items: [
//items
],
button: { // standard button config
text: "Button",
handler: function() {
// handler
}
}
});

watrboy00
22 Jun 2008, 9:37 AM
Pretty nice extension. Would be useful to use if you wanted to have a button there that created a new tab.