Définir des valeurs de champ de formulaire dans ExtJS

Je suis en utilisant ExtJS pour créer un 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 à des champs de formulaire par le nom de définir leur valeur manuellement? Grâce

OriginalL'auteur jeremib | 2010-03-14

  1. 24

    C'est assez facile:

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

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

    • obtenir le sous-jacent Ext.forme.BasicForm 

      var form = formPanel.getForm();

    • vous pouvez ensuite utiliser findField(name) pour récupérer vos champs de formulaire par leurs noms:

      var cellField = form.findField('cell_phone');
    Merci, c'était facile.
    Il est beaucoup plus facile de simplement donner à chaque champ id et ne Ext.getCmp('cell_phone');. Il est aussi plus rapide (direct hachage de recherche au lieu d'une boucle interne à chaque fois).
    C'est exact, seulement dans le cas de l'application d'un id à vos champs de formulaire. Ext.getCmp() (qui est un raccourci pour Ext.ComponentMgr.get()) n'est en mesure de récupérer des composants par leur id. À l'aide du code de l'OP présenté, Ext.getCmp('cell_phone'); ne fonctionne pas.
    Euh, oui, je sais. Ma recommandation est d'utiliser l'id au lieu de compter uniquement sur le nom (c'est pourquoi j'ai dit "donner à chacun un champ d'id..."), pour les raisons que j'ai mentionnées. De toute façon fonctionne correctement, mais à l'aide de l'id est généralement plus simple à traiter.
    Oups désolé, j'ai plus de lire la partie sur l'affectation d'id.

    OriginalL'auteur Stefan Gehrig

  2. 19

    Vous pouvez également les mettre en vrac à l'aide de la setValues() la méthode.

    par exemple:

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

    OriginalL'auteur Jason

  3. 3

    Sympa! a fonctionné pour moi 😀

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

    ...

    articles: [{

    xtype:'textfield',

    fieldLabel: "le prénom",

    nom: prenom',

    id: 'prenom',

    valeur: 'somevalue',

    point d'ancrage:'95%'

    },

    ...

    OriginalL'auteur renedet