Лучший способ обработки для нескольких форм

Question

У меня есть три кнопки в панели. Каждая кнопка имеет определенную функцию. Что я хочу делать, когда пользователь нажимает кнопку, я хотел бы загрузить определенную форму в панель. Причина в том, что, когда я использую getForm().getValues(), возвращаемый массив имеет все значения формы. Я хочу получить только необходимую часть формы. Можно ли использовать несколько форм в панели?

Answer 1

Почему нет? Просто установите скрытый: 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); 
}