Better way handling to multiple form - extjs

Question

I have three button in a panel. Each button has a specific function. What I want to do, when an user click the button, I would like to load specific form into panel. The reason is that, when I use getForm().getValues() the returning array has whole form values. I want to get only necessary part of the form. Is it possible to use multiple form in a panel?

Answer 1

Why not? Just set hidden: true for each formpanel and call show() for one.
Here is working sample: http://jsfiddle.net/9TkrS/
Here is the code:
Ext.create('Ext.panel.Panel', {
frame: true,
width: 300,
height: 150,
title: 'Main panel',
margin: 5,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: 'fit',
flex: 1,
defaults: {
layout: 'anchor',
},
items: [{
xtype: 'form',
id: 'fp1',
items:[{
xtype: 'textfield',
margin: 5,
anchor: '100%',
fieldLabel: 'form 1: text field',
name: 'textField',
value: 'FORM 1'
}]
},{
xtype: 'form',
id: 'fp2',
hidden: true,
items:[{
xtype: 'textfield',
margin: 5,
anchor: '100%',
fieldLabel: 'form 2: text field',
name: 'textField',
value: 'FORM 2'
}]
}]
}, {
xtype: 'container',
height: 30,
padding: 5,
defaults: {
margin:'0 5 0 0'
},
items:[{
xtype: 'button',
text: 'form 1',
listeners: {
click: function(){
triggerForms(true);
}
}
},{
xtype: 'button',
text: 'form 2',
listeners: {
click: function(){
triggerForms(false);
}
}
}]
}]
});
function triggerForms(firstForm){
fp1 = Ext.getCmp('fp1');
fp2 = Ext.getCmp('fp2');
if(firstForm){
fp1.show();
fp2.hide();
} else {
fp1.hide();
fp2.show();
}
setTimeout( function(){
Ext.MessageBox.alert(
Ext.JSON.encode((firstForm ? fp1 : fp2).getForm().getValues())
);
}, 300);
}