items: [{
xtype: 'form',
stype: {
marginTop: '10px'
},
layout: {
type: 'hbox'
},
items: [{
xtype: 'form',
layout: {
type: 'vbox'
},
defaults: {
labelAlign: 'top',
width: 150
},
items: [{
xtype: 'button',
cls: 'datePickerSearchBtn',
text: 'Today',
listeners: {
click: function() {
// when clicking on this button need to set value to today in my datepicker
}
}
}, {
xtype: 'button',
cls: 'datePickerSearchBtn',
text: 'Yesterday',
listeners: {
click: function() {
// when clicking on this button need to set value to yesterday in my datepicker
this.up('timeIntervalPanel').down('[name=startHourCombo]').reset();
this.up('timeIntervalPanel').down('[name=endHourCombo]').reset();
}
}
}, {
xtype: 'button',
cls: 'datePickerSearchBtn',
text: 'Last 7 days',
listeners: {
click: function() {
this.up('timeIntervalPanel').setDates(Ext.Date.add(new Date(), Ext.Date.DAY, -7), new Date());
this.up('timeIntervalPanel').down('[name=startHourCombo]').reset();
this.up('timeIntervalPanel').down('[name=endHourCombo]').reset();
}
}
}, {
xtype: 'button',
cls: 'datePickerSearchBtn',
text: 'Last Month',
listeners: {
click: function() {
this.up('timeIntervalPanel').setDates(Ext.Date.add(new Date(), Ext.Date.MONTH, -1), new Date());
this.up('timeIntervalPanel').down('[name=startHourCombo]').reset();
this.up('timeIntervalPanel').down('[name=endHourCombo]').reset();
}
}
}]
}, {
xtype: 'form',
border: true,
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'container',
layout: 'hbox',
margin: '0 0 20 0',
items: [{
title: 'Start Date',
margin: '0 20 0 0',
header: {
titleAlign: 'center'
},
items: {
xtype: 'datepicker',
itemId: 'startDate',
value: Ext.Date.add(new Date(), Ext.Date.DAY, -1),
showToday: false,
handler: function(picker, date) {
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());
}
});
答案 0 :(得分：0)
只需在两个时间段的更改事件中调用setDates()，然后获取这些时间段的值，并将其添加到按钮的setText()。
示例代码：
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
border: true,
renderTo: Ext.getBody(),
layout: {
type: 'hbox'
},
listeners: {
afterrender: function(button) {
button.setDates();
}
},
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');
startDatePicker.setValue(startDate);
endDatePicker.setValue(endDate);
startDatePicker.setMaxDate(endDate);
endDatePicker.setMinDate(startDate);
},
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
labelAlign: 'top',
width: 150
},
items: [{
xtype: 'button',
cls: 'datePickerSearchBtn',
text: 'Today',
listeners: {
click: function() {
// when clicking on this button need to set value to today in my datepicker
}
}
}, {
xtype: 'button',
cls: 'datePickerSearchBtn',
text: 'Yesterday',
listeners: {
click: function() {
// when clicking on this button need to set value to yesterday in my datepicker
this.up('form').down('[name=startHourCombo]').reset();
this.up('form').down('[name=endHourCombo]').reset();
}
}
}, {
xtype: 'button',
cls: 'datePickerSearchBtn',
text: 'Last 7 days',
listeners: {
click: function() {
this.up('form').setDates(Ext.Date.add(new Date(), Ext.Date.DAY, -7), new Date());
this.up('form').down('[name=startHourCombo]').reset();
this.up('form').down('[name=endHourCombo]').reset();
}
}
}, {
xtype: 'button',
cls: 'datePickerSearchBtn',
text: 'Last Month',
listeners: {
click: function() {
this.up('form').setDates(Ext.Date.add(new Date(), Ext.Date.MONTH, -1), new Date());
this.up('form').down('[name=startHourCombo]').reset();
this.up('form').down('[name=endHourCombo]').reset();
}
}
}]
},
{
xtype: 'container',
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'container',
layout: 'hbox',
margin: '0 0 20 0',
items: [{
title: 'Start Date',
margin: '0 20 0 0',
items: {
xtype: 'datepicker',
value: Ext.Date.add(new Date(), Ext.Date.DAY, -1),
itemId: 'startDate',
showToday: false,
handler: function(picker, date) {
var timeIntervalPanel = this.up('form');
var endDate = timeIntervalPanel.endDate;
timeIntervalPanel.setDates(date, endDate);
}
}
}, {
title: 'End Date',
margin: '0 20 0 0',
items: {
xtype: 'datepicker',
itemId: 'endDate',
value: Ext.Date.add(new Date(), Ext.Date.DAY, -1),
showToday: false,
handler: function(picker, date) {
var timeIntervalPanel = this.up('form');
var startDate = timeIntervalPanel.startDate;
timeIntervalPanel.setDates(startDate, date);
}
}
}]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 20 0 0',
items: [{
xtype: 'timefield',
name: 'startHourCombo',
id: 'startTime',
minValue: '12:00 AM',
maxValue: '11:00 PM',
increment: 60,
value: '12:00 AM',
},
{
xtype: 'timefield',
name: 'endHourCombo',
id: 'endTime',
minValue: '12:00 AM',
maxValue: '11:00 PM',
increment: 60,
value: '11:00 PM',
}
]
},
]
}
]
});
}
});<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>