Better way handling to multiple form

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