ExtJs getValues（）表單

Question

我有問題。 可能它會是一個簡單的解決方案。 我怎樣才能得到文本框的值，當我點擊保存按鈕？

Ext.define('MyApp.view.main.MyForm', { 
    extend: 'Ext.Window', 
    layout: 'column', 
    . 
    . 
    . 

    defaults: { 
     layout: 'form', 
     xtype: 'container', 
     defaultType: 'textfield', 
     labelWidth: 150, 
     width: 300 
    }, 

    items: [{ 
     items: [ 
      { fieldLabel: 'FirstName', allowBlank: false }, 
      { fieldLabel: 'LastName', allowBlank: false }, 

     ] 
    }, { 
     items: [ 
      { fieldLabel: 'Street' }, 
      { fieldLabel: 'Town' }, 
     ] 
    }], 
    buttons: [ 
     { text: 'Save', handler: function(){ alert('Saved!'); } }, 
    ] 
}); 

Answer 1

您必須使用表單字段容器，例如 - Ext.form.Panel。然後你可以使用getForm（）然後getValues（），同時檢查你的字段 - isValid（）來檢查allowBlank。

var formPanel = Ext.create('Ext.form.Panel', { 
     name: 'myfieldform', 

     defaults: { 
      layout: 'form', 
      xtype: 'container', 
      defaultType: 'textfield', 
      labelWidth: 150, 
      width: 300 
     }, 

     items: [{ 
      items: [ 
       { 
         fieldLabel: 'FirstName', 
         allowBlank: false 
       }, 
       { 
         fieldLabel: 'LastName', 
         allowBlank: false 
       }, 

      ] 
      }, { 
       items: [ 
        { fieldLabel: 'Street' }, 
        { fieldLabel: 'Town' }, 
       ] 
      }] 
     }); 

Ext.define('MyApp.view.main.MyForm', { 
     ... 

     items: [ 
      formPanel 
     ], 

     buttons: [ 
      { 
       text: 'Save', 
       handler: function(btn) { 
        var form = btn.up().up().down('[name="myfieldform"]').getForm(), 
         values; 

        if (!form || !form.isValid()) 
        { 
         alert('Check your form please!'); 
         return; 
        } 

        values = form.getValues(); 
        for(var name in values) { 
          alert(values[name]); 
        } 
       } 
      } 
     ] 
}); 

---

Sencha Fiddle Example

---

Answer 2

你的處理函數將有按鈕，並在它的標誌性事件的選項。使用按鈕和「向上」功能獲取表單元素並檢索附加到表單的記錄模型（假設您使用的是模型）。

handler: function(btn, eOpts){ 
    var form = btn.up('form'); 
    form.getForm().updateRecord(); 
    var record = form.getForm().getRecord(); 
    alert('Saved!'); 
} 

如果不使用模型，只想值在表單中添加的itemId的各個領域，並再次使用了功能以「＃」來獲取特定的組件。然後只需使用getValue方法。

items: [ 
    { fieldLabel: 'FirstName', itemId: 'firstnamefield', allowBlank: false }, 
    { fieldLabel: 'LastName', itemId: 'lastnamefield', allowBlank: false }, 

] 

handler: function(btn, eOpts){ 
    var firstNameField = btn.up('#firstnamefield'); 
    var firstNameValue = firstNameField.getValue(); 
    alert('Saved!'); 
} 

Answer 3

說真的，爲什麼要用up.up.down的方法，如果你能立刻得到這個東西？

var form = Ext.ComponentQuery.query('[name="myfieldform"]').getForm()[0]; 

或者

values = Ext.ComponentQuery.query('[name="myfieldform"]').getForm()[0].getValues(); 

換句話說，拿上面的回答，使它像這樣：

var formPanel = Ext.create('Ext.form.Panel', { 
     name: 'myfieldform', 

     defaults: { 
      layout: 'form', 
      xtype: 'container', 
      defaultType: 'textfield', 
      labelWidth: 150, 
      width: 300 
     }, 

     items: [{ 
      items: [ 
       { 
         fieldLabel: 'FirstName', 
         allowBlank: false 
       }, 
       { 
         fieldLabel: 'LastName', 
         allowBlank: false 
       }, 

      ] 
      }, { 
       items: [ 
        { fieldLabel: 'Street' }, 
        { fieldLabel: 'Town' }, 
       ] 
      }] 
     }); 

Ext.define('MyApp.view.main.MyForm', { 
     ... 

     items: [ 
      formPanel 
     ], 

     buttons: [ 
      { 
       text: 'Save', 
       handler: function(btn) { 
        var form = Ext.ComponentQuery.query('[name="myfieldform"]').getForm()[0]; 

        if (!form || !form.isValid()) 
        { 
         alert('Check your form please!'); 
         return; 
        } 

        values = form.getValues(); 
        for(var name in values) { 
          alert(values[name]); 
        } 
       } 
      } 
     ] 
});