Comment obtenir une valeur de champ de formulaire dans l'événement onclick
Question
J'utilise cet article de l'architecture : //blog.extjs.eu/know-how/writing-a-big-application-in-ext/
dans mon code:
Je possède ce Application.DashBoardForm.js dans ce que je veux transmettre la valeur de la fromdate dans la fonction d'événement onclick, comment puis-je passer la valeur fromdate?
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return false;
}
if (field.startDateField) {
var start = Ext.getCmp(field.startDateField);
if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
start.setMaxValue(date);
start.validate();
}
}
else if (field.endDateField) {
var end = Ext.getCmp(field.endDateField);
if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
end.setMinValue(date);
end.validate();
}
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
}
});
Application.DashBoardForm= Ext.extend(Ext.FormPanel, {
border:false
,initComponent:function() {
var config = {
labelWidth: 125,
frame: true,
title: 'Date Range',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 175},
defaultType: 'datefield',
items: [{
fieldLabel: 'Start Date',
name: 'fromdate',
id: 'fromdate',
vtype: 'daterange',
value : new Date(),
endDateField: 'todate' // id of the end date field
},{
fieldLabel: 'End Date',
name: 'todate',
id: 'todate',
vtype: 'daterange',
value : new Date(),
startDateField: 'fromdate' // id of the start date field
}]
,buttons: [{
text: 'Go',
onClick : function () {
// here i want to access the value of the form field
// how can i access the fromdate value so that i pass it to grid
console.log(this.getForm());
var win = new Ext.Window({
items:{xtype:'DashBoardGrid',fromdate:this}
});
win.show();
}
}]
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.DashBoardForm.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function() {
// this.store.load();
Application.DashBoardForm.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('DashBoardForm', Application.DashBoardForm);
Comment puis-je passer la valeur de la date ici en fonction onclick?
La solution
Etant donné que vous avez donné le champ un ID de « fromdate », vous pouvez faire référence à l'aide Ext.getCmp () et de là appeler sa méthode getValue ():
var field = Ext.getCmp('fromdate');
var win = new Ext.Window({
items: {
xtype: 'DashBoardGrid',
fromdate: field.getValue()
}
});
Autres conseils
Définir la portée de votre bouton « Go », de sorte que vous aurez accès à former dans la méthode de gestionnaire. En faisant cela, vous aurez accès à la forme de la méthode de gestionnaire.
Maintenant, pour avoir accès à l'élément de formulaire, vous pouvez utiliser la propriété de ref
ou utiliser des méthodes de find*()
disponibles dans Ext.form.FormPanel
pour obtenir l'élément de formulaire.
text: 'Go',
scope: this,
handler: function () {
fromdate = this.findById('fromdate');
// extract date value and use it...
value = fromdate.getValue();
}
Lorsque vous utilisez la propriété ref, a établi un arbitre pour le champ formdata:
ref: '../formdate'
fieldLabel: 'Start Date',
name: 'fromdate',
id: 'fromdate',
vtype: 'daterange',
value : new Date(),
endDateField: 'todate' // id of the end date field
Et vous devriez être en mesure d'accéder à l'élément de forme par l'objet de formulaire dans le gestionnaire.
this.formdate.getValue()