Comment ajouter un onChange méthode à tous les champs (textField) dans un ExtJS 4 formulaire

Comment puis-je ajouter un événement de changement de à tous les " champs de texte d'un formulaire à l'intérieur d'une fenêtre? Je crée d'abord une fenêtre avec un formulaire. Tous les champs sont initialisés avec une valeur de 0. Je tiens à détecter l'entrée de l'utilisateur (peut-être avec dirtychange), et si la est supérieur à 1, puis de modifier la couleur d'arrière-plan de la zone de texte.

C'est mon code pour le moment:

Ext.define('WPT.view.HoursPerMonthWindow', {
extend: 'Ext.window.Window',
alias : 'widget.hourspermonthwindow',
title : 'Hours per Months',
layout: 'fit',
autoShow: true,   
initComponent: function() {
this.items = [
{
xtype: 'form',           
items: [
{
xtype: 'textfield',
name : 'january',
itemId: 'january',
fieldLabel: 'January'            
},
{
xtype: 'textfield',
name : 'february',
itemId: 'february',
fieldLabel: 'February'
}
,
{
xtype: 'textfield',
name : 'march',
itemId: 'march',
fieldLabel: 'March'
},
{
xtype: 'textfield',
name : 'april',
itemId: 'april',
fieldLabel: 'April'
},
{
xtype: 'textfield',
name : 'may',
itemId: 'may',
fieldLabel: 'May'
},
{
xtype: 'textfield',
name : 'june',
itemId: 'june',
fieldLabel: 'June'
},
{
xtype: 'textfield',
name : 'july',
itemId: 'july',
fieldLabel: 'July'
},
{
xtype: 'textfield',
name : 'august',
itemId: 'august',
fieldLabel: 'August'
},
{
xtype: 'textfield',
name : 'september',
itemId: 'september',
fieldLabel: 'September'
},
{
xtype: 'textfield',
name : 'october',
itemId: 'october',
fieldLabel: 'October'
},
{
xtype: 'textfield',
name : 'november',
itemId: 'november',
fieldLabel: 'November'
},
{
xtype: 'textfield',
name : 'december',
itemId: 'december',
fieldLabel: 'December'
}                   
]           
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
})

Avez-vous des conseils pour ce problème?
Merci pour votre aide
Manel

  • que faire de ces objets textfield rendu comme dans le code HTML? vous pouvez simplement attacher les gestionnaires à l'aide de javascript si extjs ne fournit pas un moyen simple.
InformationsquelleAutor user1638045 | 2012-08-31
  1. 2

    Extjs offre un moyen très simple d'ajouter des auditeurs, en particulier la extjs 4 architecture mvc. Vous devez ajouter les auditeurs sur le contrôleur de la vue

    Ext.define('App.controller.SomeController', {
extend:'Ext.app.Controller',
init:function () {
this.control({
'hourspermonthwindow > form > textfield':{
change: this.handleOnChange
}
});
},
handleOnChange:function(textfield,newValue,oldValue){
//your code here
}
});
    • Merci, cela a bien fonctionné!!
    InformationsquelleAutor nscrob
  2. 1

    Définir un nouveau composant qui s'étend textfield et ajouter l'écouteur, et utilisez-la dans votre formulaire.

    Juste un simple change auditeur devrait fonctionner.

    Puis ajouter une classe css avec la couleur, ou si vous avez besoin de différentes couleurs pour chaque ligne, puis le mettre dans le code et utiliser un color var vous passer dans votre nouveau composant

    InformationsquelleAutor Austin Greco
  3. 1

    Au lieu de {xtype : 'textfield' ... }

    champs que j'ai de nouveaux Ext.forme.TextField et j'essaie cela et fonctionnent parfaitement

    new Ext.form.TextField({enableKeyEvents: true ,
listeners : {
change : function (f, e){
action_form_update_brdoutput(null, frmBRDOutput.getForm().getValues());
}
}
})

    Extjs vous offre les auditeurs de sorte que vous pouvez surcharger.

    InformationsquelleAutor smeerkahoven