PDA

View Full Version : How to add components to tab panels



ken4ward
10 Jun 2013, 7:30 AM
A fresher in Extjs I am. I just got somethings working implemeting extjs for view with this code:


Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
title: 'The Wealth market Application',
width: 1000,
height: 450,
layout: 'accordion',
layoutConfig: {
//activeOnTop: true,
animate: true,
multi: true
},
style: 'margin: 160px', // move panel off browser’s edge
renderTo: Ext.getBody(),
items: [{
title:'Login - kindly login here.'
,defaults:{border:false, activeTab:0}
,items:
[{
defaults:{layout:'fit'}
,xtype:'tabpanel'
,items:
[{
title:'Member Login'
},{
title:'Franchise Login'
},{
title:'Merchant login'
}]
}]
}, {
................ and so on.....

In this in accordion layout tab panels are created, how do I add components like textbox, button, label, etc inside each tab. Thanks.

evant
10 Jun 2013, 5:33 PM
The same way you did it for the accordion:



{
title: 'Member Login',
items: {
xtype: 'textfield'
}
}


You can nest as deep as you need to.

ken4ward
11 Jun 2013, 12:32 AM
Thanks. ...so much appreciate!

ken4ward
11 Jun 2013, 2:47 AM
Thanks. I have been able to create component in the tab panel, but I want to add multiple components in the form. I added it thus:


title:'Member Login',
items: [
{
xtype: 'textfield',
name: 'pay',
fieldLabel: 'Pay',
size: '50',
anchor: '100%'
},
{
xtype: 'textfield',
name: 'sum',
fieldLabel: 'Sum',
size: '50',
anchor: '100%'
},
{
xtype : 'textareafield',
grow : true,
name : 'sum',
fieldLabel: 'Sum',
anchor : '100%'
},
{
xtype : 'button',
text : 'Record'
}
]
},{
...but they never show. Only the first textfield and the textareafield showed. What should i do?

Songle
11 Jun 2013, 10:59 PM
You called the textfield and the textarea the same name.