Question

我在面板中有三个按钮。每个按钮都有一个特定的功能。我想做什么，当用户点击按钮时，我想将特定表单加载到面板中。原因是，当我使用getForm().getValues()时，返回的数组具有整个表单值。我想只获得表格的必要部分。是否可以在面板中使用多个表单？

Answer 1

为什么不呢？只需为每个formpanel设置hidden：true，并为一个调用show（）。以下是工作示例：http://jsfiddle.net/9TkrS/

以下是代码：

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

处理多种形式的更好方法

1 个答案: