2010-03-14 25 views
10

sto usando ExtJS per creare un FormPanel:Impostare i valori dei campi modulo in ExtJS

new Ext.FormPanel({ 
    labelAlign: 'top', 
    title: 'Loading Contact...', 
    bodyStyle:'padding:5px', 
    width: 600, 
    autoScroll: true, 
    closable: true, 
    items: [{ 
     layout:'column', 
     border:false, 
     items:[{ 
      columnWidth:.5, 
      layout: 'form', 
      border:false, 
      items: [{ 
       xtype:'textfield', 
       fieldLabel: 'First Name', 
       name: 'first_name', 
       id: 'first_name', 
       anchor:'95%' 
      }, { 
       xtype:'datefield', 
       fieldLabel: 'Birthdate', 
       name: 'birthdate', 
       width: 150, 
      }] 
     },{ 
      columnWidth:.5, 
      layout: 'form', 
      border:false, 
      items: [{ 
       xtype:'textfield', 
       fieldLabel: 'Last Name', 
       name: 'last_name', 
       anchor:'95%' 
      },{ 
       xtype:'textfield', 
       fieldLabel: 'Email', 
       name: 'email', 
       vtype:'email', 
       anchor:'95%' 
      }] 
     }] 
    },{ 
     xtype:'tabpanel', 
     plain:true, 
     activeTab: 0, 
     height:300, 
     /* 
     * By turning off deferred rendering we are guaranteeing that the 
     * form fields within tabs that are not activated will still be 
     * rendered. This is often important when creating multi-tabbed 
     * forms. 
     */ 
     deferredRender: false, 
     defaults:{bodyStyle:'padding:10px'}, 
     items:[{ 
      title:'Address', 
      layout:'form', 
      defaults: {width: 230}, 
      defaultType: 'textfield', 

      items: [{ 
       fieldLabel: 'Line1', 
       name: 'line1', 
       allowBlank:false, 
      },{ 
       fieldLabel: 'Line2', 
       name: 'line2', 
      },{ 
       fieldLabel: 'City', 
       name: 'city', 
       allowBlank: false, 
      },{ 
       xtype:"combo", 
       fieldLabel:"State", 
       name:"state", 
       hiddenName:"combovalue" 
       }, { 
       fieldLabel: 'Zipcode', 
       name: 'zipcode', 
       allowBlank: false, 
      }] 
     },{ 
      title:'Phone Numbers', 
      layout:'form', 
      defaults: {width: 230}, 
      defaultType: 'textfield', 

      items: [{ 
       fieldLabel: 'Home', 
       name: 'home_phone', 
      },{ 
       fieldLabel: 'Cell', 
       name: 'cell_phone' 
      },{ 
       fieldLabel: 'Emergency', 
       name: 'emergency_phone' 
      }] 
     },{ 
      cls:'x-plain', 
      title:'Notes', 
      layout:'fit', 
      items: { 
       xtype:'htmleditor', 
       name:'notes', 
       fieldLabel:'Notes' 
      } 
     }] 
    }], 

    buttons: [{ 
     text: 'Save' 
    },{ 
     text: 'Cancel' 
    }] 
}) 

Come posso accedere i campi del modulo con il nome di impostare manualmente il loro valore? Grazie

risposta

24

E 'abbastanza facile:

  • ottenere le mani sulla forma del pannello (a proposito è Ext.form.FormPanel e non solo Ext.FormPanel):

    var formPanel = new Ext.form.FormPanel({...}); 
    
  • ottenere il sottostante Ext.form.BasicForm

    var form = formPanel.getForm(); 
    
  • yo u quindi possibile utilizzare findField(name) per recuperare i campi del modulo con i loro nomi:

    var cellField = form.findField('cell_phone'); 
    
+0

Grazie, è stato facile. – jeremib

+0

È molto più semplice assegnare a ogni campo un ID e fare 'Ext.getCmp ('cell_phone');'. È anche più veloce (ricerca hash diretta invece di un loop interno ogni volta). –

+0

@bmoeskau: Questo è corretto solo se si applica un 'id' ai campi del modulo. 'Ext.getCmp()' (che è una scorciatoia per 'Ext.ComponentMgr.get()') è in grado di recuperare i componenti solo con i loro id. Usando il codice presentato dall'OP, 'Ext.getCmp ('cell_phone');' non funzionerà. –

19

È inoltre possibile impostare in massa utilizzando il metodo() setValues.

esempio:

Ext.getCmp('formname').getForm().setValues({ 
fielda: 'value1', 
fieldb: 'value2' 
}) 
3

Nizza! ha funzionato per me: D

Ma è possibile impostare il valore predefinito:

...
oggetti: [{
xtype: 'textfield',
fieldLabel: 'Nome',
nome: 'first_name',
id: 'first_name',
valore: 'somevalue',
ancoraggio: 95%'
},
...

Problemi correlati