PDA

View Full Version : [SOLVED] Tabpanel



genix
11 Apr 2010, 9:05 AM
Hi,

i want to create an Application which is able to create Tabs from extended Panels.
Everything works fine, but when I put an FormPanel in the Panel, the Fieldsets, Radiogroups etc. don't appear like they should.

Here a Screenshot:
19870

The MainPanel Code (Creates the TabPanels):


MainPanel = function(){
MainPanel.superclass.constructor.call(this, {
region: 'center',
deferredRender: false,
margins:'0 5 5 0',
activeTab: 0,
items: [new StartPanel()],
plugins: new Ext.ux.TabCloseMenu(),
autoDestroy: true
});
}

Ext.extend(MainPanel, Ext.TabPanel, {
initEvents : function(){
MainPanel.superclass.initEvents.call(this);
this.body.on('click', this.onClick, this);
},

onClick: function(e, t){

},

addPanel: function(type, conf){
var p = this.getComponent('item-' + type);
var config = {iconCls: 'icon-' + type, itemId: 'item-' + type};
Ext.apply(config, conf);

if(!p){
switch(type){
case "invoice":
p = new InvoicePanel(config);
break;
case "newinvoice":
p = new NewInvoicePanel(Ext.apply(config, {itemId: 'item-' + type + '-' + Ext.id()}));
break;
}

if(p) {
this.add(p);
} else {
return;
}
}


this.setActiveTab(p);
}
});
The Code of the Panel from the Screenshot:


NewInvoicePanel = Ext.extend(Ext.Panel, {
closable: true,
autoScroll: true,

initComponent: function(){
Ext.apply(this, {
title: (this.kmode == 'edit' ? tr('#%1 bearbeiten').params([this.invoiceNum]) : tr('Neue Rechnung')),
iconCls: (this.kmode == 'edit' ? 'icon-editinvoice' : this.iconCls),
border: false,
layout: 'fit',
items: [{
xtype: 'form',
labelWidth: 110,
frame: false,
border: false,
bodyStyle: 'padding:0 10px 0;',
labelAlign: 'top',
items: [{
xtype: 'fieldset',
title: tr('Rechnungsnummer'),
autoHeight: true,
items: [{
xtype: 'radiogroup',
fieldLabel: '',
columns: 1,
items: [{name: 'invoice-num', boxLabel: tr('Automatische Werterhöhung'), inputValue: '1'},
{boxLabel: tr('Generierungsfunktion'), name: 'invoice-num', inputValue: '2'},
{boxLabel: tr('Benutzerdefiniert'), name: 'invoice-num', inputValue: '3'}
]
}, {
xtype: 'textfield',
name: 'txt-test',
fieldLabel: '',
anchor: '95%'
}]
}]
}]
});
InvoicePanel.superclass.initComponent.call(this);
},

getType: function(){
return constants.panelTypes.MULTIPLE;
}
});
I hope somebody can help!

Greets,
genix

genix
11 Apr 2010, 10:00 AM
I solved it, thanks anyway, here my code:



NewInvoicePanel = Ext.extend(Ext.Panel, {
closable: true,
autoScroll: true,
border: false,
layout: 'form',

frame: true,
border: false,

initComponent: function() {
Ext.apply(this, {
title: (this.kmode == 'edit' ? tr('#%1 bearbeiten').params([this.invoiceNum]) : tr('Neue Rechnung')),
iconCls: (this.kmode == 'edit' ? 'icon-editinvoice': this.iconCls),
items: [{
xtype: 'fieldset',
title: '',
labelWidth: 140,
autoHeight: true,
items: [{
xtype: 'radiogroup',
fieldLabel: tr('Rechnungsnummer'),
columns: 1,
items: [{
name: 'invoice-num',
boxLabel: tr('Automatische Werterhöhung'),
inputValue: '1'
},
{
boxLabel: tr('Generierungsfunktion'),
name: 'invoice-num',
inputValue: '2'
},
{
boxLabel: tr('Benutzerdefiniert'),
name: 'invoice-num',
inputValue: '3'
}]
},
{
xtype: 'textfield',
name: 'txt-test',
fieldLabel: '',
anchor: '95%'
}]
}]
});
InvoicePanel.superclass.initComponent.call(this);
},

getType: function() {
return constants.panelTypes.MULTIPLE;
}
});


Greets,
genix