Régler les valeurs de champ de formulaire dans ExtJS

Question

J'utilise ExtJS pour créer un panneau FormPanel:

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' 
    }] 
}) 

Comment puis-je accéder aux champs de formulaire par le nom de définir leur valeur manuellement? Merci

Answer 1

Il est assez facile:

• obtenir la main sur la forme du panneau (par la façon dont il est Ext.form.FormPanel et pas seulement Ext.FormPanel):

  var formPanel = new Ext.form.FormPanel({...}); 
  

• obtenir le Ext.form.BasicForm

  sous-jacente

  var form = formPanel.getForm(); 
  

• yo u peut alors utiliser findField(name) pour récupérer vos champs de formulaire par leurs noms:

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

Answer 2

Vous pouvez également les mettre en vrac en utilisant la méthode setValeurs().

par exemple:

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

Answer 3

de Nice! travaillé pour moi: D

Mais vous pouvez définir la valeur par défaut:

...
articles: [{
xtype: 'textfield',
fieldLabel: 'Nom',
nom: 'prenom',
id: 'prenom',
valeur: 'somevalue',
ancre: '95% »
},
...