PDA

View Full Version : Costum tab.Panel Look TabItem



Endolino
29 Nov 2011, 12:54 PM
Hello,

i am searching for a solution to create my own tabslook.
When i am creating a Tab.Panel i give into the items-tag my Panels.
There i have seen in the docu, its possible to overgive a Ext.Template but it doesent render my own Panel-Style with my own HTML-Structure. It only shows the standard Panel-Tab.
(http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Panel-cfg-tpl)

Example:


Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
plain: true,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html : 'A simple tab'
tpl : ???? (new Ext.Template('<div>{title}</div>'))
}
],
renderTo : Ext.getBody()
});

What type are the items, Ext.tab.Tab???

Thank you for help,
best regards

mitchellsimoens
29 Nov 2011, 2:27 PM
The tpl config will allow you to specify a template and then use the update method or data config and it will apply that data to the template and update the panel's body. To change the look of the tab, you would have to use CSS. If you actually want to change the markup, create an extension of Ext.tab.Tab and then in the tabbar config of the Ext.tab.Panel set the defaultType to that of your new Tab extension.

Endolino
29 Nov 2011, 10:44 PM
Hi,

thank you for the fast response. I found a solution in ExtJS3, but it doesn't work with Version 4.
Thats a way i like to do. But how to adapt on ExtJS4? itemTpl is removed:


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

Endolino
30 Nov 2011, 1:42 AM
After serveral hours i try to work with costumTabs, i got following code, but dosen't work too.
The Activeclass and the closable option wont be inherit. Markup too :-(. Please help.:-/



Ext.onReady(function() {
Ext.define('PressMeButton', {
extend: 'Ext.button.Button',
alias: 'widget.pressmebutton',
text: 'Press Me'
})
//Ext.Compat.showErrors = true;

Ext.define('Myowntab',{
extend:'Ext.tab.Tab',
alias:'widget.myowntabs',
closable:true,
activeCls: 'active-endolino',
config:{
closable:true,
activeCls: 'active-endolino'
},
tpl: new Ext.Template('<div class="Tab"></div>'),
initComponent: function() {

this.callParent(arguments);
//this.getTemplateArgs(arguments);
},
getTemplateArgs: function(item) {

// Call the native method to collect the base data. Like the ID!
var result = Myowntab.prototype.getTemplateArgs.call(this, item);
// Add stuff used in our template
return Ext.apply(result, {
closable: item.closable,
src: item.iconSrc,
extra: item.extraText || ''
});
}
});

Ext.define('TabPanelStandard', {
extend: 'Ext.tab.Panel',
minTabWidth: 70,
tabWidth: 100,
width: 400,
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
initComponent: function() {
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems: function(){
var items =
[{
padding: 10, // nope :(
title: 'Gantt',
autoScroll: true,
iconCls: 'gantt icon',
html:'Inhalt 1',
extraText: 'test the best'
},
{
padding: 10,
height: 10, // nope :(
title: 'Logs',
autoScroll: true,
iconCls: 'logs icon',
html:'Inhalt 2'
}];
return items
}
});
Ext.create('TabPanelStandard',{
renderTo: Ext.getBody(),
tbar: [
{ xtype: 'pressmebutton'}
],
tabBar: {
defaultType: new Myowntab
}
});
});