articles: [{ xtype: 'form', sType: { marginTop: '10px' }, mise en page: { Type: 'hbox' }, articles : [{ xtype: 'forme', mise en page: { Type: 'vbox' }, par défaut: { labelAlign: 'top', largeur: 150 }, objet: [{ xtype: ' bouton ', cls: 'datePickerSearchBtn', texte: 'Aujourd'hui', auditeurs: { clic: function() {// en cliquant sur ce bouton besoin de mettre en valeur aujourd'hui dans mon datepicker }} }, { xtype: 'bouton', cls: 'datePickerSearchBtn', texte: 'hier', auditeurs: { clic: function() {// en cliquant sur ce bouton besoin de mettre en valeur hier dans mon datepicker this.up ('timeIntervalPanel'). down ('[name = startHourCombo]'). reset(); this.up ('timeIntervalPanel'). Down ('[nom = endHourCombo]'). Reset(); }} }, { xtype: 'bouton', cls: 'datePickerSearchBtn', texte: «Les 7 derniers jours, auditeurs: { clic: function() { this.up ('timeIntervalPanel') .setDates (Ext.Date.add (new Date(), Ext.Date.DAY, - 7), nouvelle Date()); this.up ('timeIntervalPanel'). Down ('[nom = startHourCombo]'). Reset(); this.up ('timeIntervalPanel'). Down ('[nom = endHourCombo]'). Reset(); }} }, { xtype: 'bouton', cls: 'datePickerSearchBtn', texte: 'Le mois dernier', auditeurs: { clic: function() { this.up ('timeIntervalPanel') .setDates (Ext.Date.add (new Date(), Ext.Date.MONTH, - 1), new Date()); this.up ('timeIntervalPanel'). Down ('[nom = startHourCombo]'). Reset(); this.up ('timeIntervalPanel'). Down ('[nom = endHourCombo]'). Reset(); } } }] }, { xtype: 'forme', frontière: true, mise en page: { Type: 'Vbox', align: 'centre' }, articles: [{ xtype : 'conteneur', mise en page: 'hbox', marge: '0 0 20 0', articles: [ { titre: 'date de début', marge: '0 20 0 0', tête: { titleAlign: 'centre' }, articles: { xtype: 'datepicker', itemId: 'startDate', valeur: Ext.Date.add (new Date(), Ext.Date.JOUR, -1), showToday: false, gestionnaire : function (sélecteur, date) {affichage ExtJS sélectionné timefiled et datepicker valeurs ensemble
var timeInterval = this.up('timeIntervalPanel');
var endDate = timeInterval.endDate;
//timeInterval.setDates(date, endDate);
var oneDay = 24 * 60 * 60 * 1000;
var diffDays = Math.round(Math.abs((endDate.getTime() - date.getTime())/(oneDay)));
if (diffDays > 29) {
this.up('timeIntervalPanel').down('[name=startHourCombo]').disable();
this.up('timeIntervalPanel').down('[name=text]').disable();
this.up('timeIntervalPanel').down('[name=endHourCombo]').disable();
} else {
this.up('timeIntervalPanel').down('[name=startHourCombo]').enable();
this.up('timeIntervalPanel').down('[name=text]').enable();
this.up('timeIntervalPanel').down('[name=endHourCombo]').enable();
}
}
}
}, {
title: 'End Date',
margin: '0 20 0 0',
header: {
titleAlign: 'center'
},
items:{
xtype: 'datepicker',
itemId: 'endDate',
value:Ext.Date.add(new Date(), Ext.Date.DAY, -1),
showToday: false,
handler: function(picker, date) {
var timeInterval = this.up('timeIntervalPanel');
var startDate = timeInterval.startDate;
//timeInterval.setDates(startDate, date);
var oneDay = 24 * 60 * 60 * 1000;
var diffDays = Math.round(Math.abs((date.getTime() - startDate.getTime())/(oneDay)));
if (diffDays > 30) {
this.up('timeIntervalPanel').down('[name=startHourCombo]').disable();
this.up('timeIntervalPanel').down('[name=text]').disable();
this.up('timeIntervalPanel').down('[name=endHourCombo]').disable();
} else {
this.up('timeIntervalPanel').down('[name=startHourCombo]').enable();
this.up('timeIntervalPanel').down('[name=text]').enable();
this.up('timeIntervalPanel').down('[name=endHourCombo]').enable();
}
}
}
}]
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
margin: '0 20 0 0',
items:{
xtype: 'timefield',
name: 'startHourCombo',
id: 'startTime',
maxWidth: 100,
columnWidth: 0.2,
minValue: '12:00 AM',
maxValue: '11:00 PM',
increment: 60,
anchor: '100%',
value: '12:00 AM',
disabled: false,
listeners: {
change: function() {
var timeIntervalPanel = this.up('timeIntervalPanel');
timeIntervalPanel.setDates(timeIntervalPanel.startDate, timeIntervalPanel.endDate);
}
}
}
},{
margin: '0 20 0 0',
items: {
xtype: 'displayfield',
name: 'text',
maxWidth: 80,
minWidth: 30,
columnWidth: 0.2,
value: 'To',
disabled: false
}
},
{
xtype: 'timefield',
name: 'endHourCombo',
id: 'endTime',
maxWidth: 100,
minValue: '12:00 AM',
maxValue: '11:00 PM',
increment: 60,
anchor: '100%',
value: '12:00 AM',
disabled: false,
listeners: {
change: function() {
var timeIntervalPanel = this.up('timeIntervalPanel');
timeIntervalPanel.setDates(timeIntervalPanel.startDate, timeIntervalPanel.endDate);
}
}
}
]
}]
}]
}],
setDates: function(startDate, endDate) {
if (!startDate) startDate = new Date();
if (!endDate) endDate = new Date();
this.startDate = startDate;
this.endDate = endDate;
var startDatePicker = this.down('datepicker#startDate');
var endDatePicker = this.down('datepicker#endDate');
var startTime = this.up().down('timefield#startTime');
var endTime = this.up().down('timefield#endTime');
startDatePicker.setValue(startDate);
endDatePicker.setValue(endDate);
startDatePicker.setMaxDate(endDate);
endDatePicker.setMinDate(startDate);
var startDateValue = Ext.Date.format(startDate, 'd-m-Y');
var endDateValue = Ext.Date.format(endDate, 'd-m-Y');
this.setText(startDateValue + " " + startTime.getRawValue() + " TO " + endDateValue + " " + endTime.getRawValue());
}
});
Vos données ne sont pas un objet JSON valide, détails exemple de problème nécessaire etc ... –
je veux afficher les valeurs de timefield défaut de ExtJs, lorsque l'utilisateur sélectionne le sélecteur de date du formulaire de date et l'heure de mon champ de temps, veut afficher les deux valeurs ensemble date et heure – anka
Où vous devez afficher ces valeurs ?? –