Javascript 如何根据ExtJS中的下拉值和开始日期计算日期？
我想根据下拉列表和开始日期计算结束日期。我使用考拉框架3.8（ExtJS2.3和Zend 1.12） 如果我从下拉列表中选择“3”，开始日期为2015年7月7日： 然后结束日期值变为2015年8月7日（+1个月，取决于“3”值的DB字段）： 我需要一些东西来监听combobox/datefield上的更改事件，并动态设置日期（取决于带有ajax请求的combobox的DB月数或其他方式） 分步骤：Javascript 如何根据ExtJS中的下拉值和开始日期计算日期？,javascript,extjs,extjs2,koala-framework,Javascript,Extjs,Extjs2,Koala Framework,我想根据下拉列表和开始日期计算结束日期。我使用考拉框架3.8（ExtJS2.3和Zend 1.12） 如果我从下拉列表中选择“3”，开始日期为2015年7月7日： 然后结束日期值变为2015年8月7日（+1个月，取决于“3”值的DB字段）： 我需要一些东西来监听combobox/datefield上的更改事件，并动态设置日期（取决于带有ajax请求的combobox的DB月数或其他方式） 分步骤： 我在表单中设置组合框值并设置开始日期 如果第一步完成值不为空，则从DB中选择月份值（从app
从approachesCount=3和…如何做到这一点 您可以在侦听
更改（this、newValue、oldValue、eOpts）事件的组合框
和开始日期日期字段
上添加侦听器
然后检查是否选择了组合框
和开始日期日期字段
。如果是真的，则向服务器请求ajax.request
，并获取结束日期的值
这只是一个示例，说明了许多解决方案之一（而非伪代码）：
查看
控制器
最后我这样做了，也许可以做得更好：
var Employees = Ext2.extend(Ext2.Panel,
{
initComponent : function(test)
{
....
....
//save context
var controller = this;
var documents = new Kwf.Auto.GridPanel({
controllerUrl : '/employees/documents',
collapsible : true,
stripeRows : true,
title : 'Recurrent training',
gridConfig: {
selModel: new Ext2.grid.CheckboxSelectionModel()
},
listeners: {
loaded: function() {
//get gripdpanel autoform
var autoForm = this.getEditDialog().getAutoForm();
//add form render event actions
autoForm.on('renderform', function(form) {
//get fields
var typeId = form.findField('typeId');
var startDate = form.findField('startDate');
//add select event to ComboBox
typeId.on('select', function(typeId, record, index) {
//get start date
var startDateValue = startDate.getValue();
//function call with autoform context
controller.changeDateType.call(autoForm, startDateValue, record.data.id);
});
//add select event to DateField
startDate.on('select', function(startDate, date) {
//get id type
var typeName = typeId.getValue();
//function call with autoform context
controller.changeDateType.call(autoForm, date, typeName);
});
//add keyup event to DateField
startDate.on('keyup', function(startDate, e) {
//if valid
if(startDate.isValid()) {
//get start date
var startDateValue = startDate.getValue();
//get id type
var typeName = typeId.getValue();
//function call with autoform context
controller.changeDateType.call(autoForm, startDateValue, typeName);
}
});
});
}
}
});
....
....
},
changeDateType: function(date, type){
//get end date
var endDate = this.findField('endDate');
//if both values not empty
if(!Ext2.isEmpty(date) && !Ext2.isEmpty(type)){
//do ajax with:
//url - catalog url
//params - id type
Ext2.Ajax.request({
url: '/flightchecks/flightcheck/json-load',
params: { id: type },
success: function(response, options, result) {
//get months from result
var months = result.data.months;
//create new date and plus returned months
var newDate = date.add(Date.MONTH, months);
//set new date
endDate.setValue(newDate);
}
});
}
}
});
请提供您正在使用的代码。这与Ext 2.3的工作方式不同（定义语法不同，不存在视图控制器），但作为“伪代码”，这是一个完美的答案。很抱歉耽搁了很长时间，我已经提高了JS技能=）谢谢您的回答，它帮助我构建了自己的代码。你可以在下面看到我的解决方案。
Ext.define('YourController', {
extend: 'Ext.app.Controller',
init: function () {
var controller = this;
controller.control({
'yourPanel combobox#approachCountId': {
change: controller.changeEndDateValue
},'yourPanel combobox#dateStartId': {
change: controller.changeEndDateValue
}
})
},
changeEndDateValue: function(field, newValue, oldValue, eOpts){
var controller = this;
//YourCode here to check if combobox value and end date value are not empty.
if(!Ext.isEmpty(startDateField) && !Ext.isEmpty(approachCount)){
//Ajax call
Ext.Ajax.request({
method: 'POST',
url: 'yourUrlToCheck',
params: {
approachCount: approachValue,
startDate: startDateValue
},
scope: this,
success: function (result, response) {
//if success set value to End Date datefield
},
failure: function (result, response) {
}
});
}
}
});
var Employees = Ext2.extend(Ext2.Panel,
{
initComponent : function(test)
{
....
....
//save context
var controller = this;
var documents = new Kwf.Auto.GridPanel({
controllerUrl : '/employees/documents',
collapsible : true,
stripeRows : true,
title : 'Recurrent training',
gridConfig: {
selModel: new Ext2.grid.CheckboxSelectionModel()
},
listeners: {
loaded: function() {
//get gripdpanel autoform
var autoForm = this.getEditDialog().getAutoForm();
//add form render event actions
autoForm.on('renderform', function(form) {
//get fields
var typeId = form.findField('typeId');
var startDate = form.findField('startDate');
//add select event to ComboBox
typeId.on('select', function(typeId, record, index) {
//get start date
var startDateValue = startDate.getValue();
//function call with autoform context
controller.changeDateType.call(autoForm, startDateValue, record.data.id);
});
//add select event to DateField
startDate.on('select', function(startDate, date) {
//get id type
var typeName = typeId.getValue();
//function call with autoform context
controller.changeDateType.call(autoForm, date, typeName);
});
//add keyup event to DateField
startDate.on('keyup', function(startDate, e) {
//if valid
if(startDate.isValid()) {
//get start date
var startDateValue = startDate.getValue();
//get id type
var typeName = typeId.getValue();
//function call with autoform context
controller.changeDateType.call(autoForm, startDateValue, typeName);
}
});
});
}
}
});
....
....
},
changeDateType: function(date, type){
//get end date
var endDate = this.findField('endDate');
//if both values not empty
if(!Ext2.isEmpty(date) && !Ext2.isEmpty(type)){
//do ajax with:
//url - catalog url
//params - id type
Ext2.Ajax.request({
url: '/flightchecks/flightcheck/json-load',
params: { id: type },
success: function(response, options, result) {
//get months from result
var months = result.data.months;
//create new date and plus returned months
var newDate = date.add(Date.MONTH, months);
//set new date
endDate.setValue(newDate);
}
});
}
}
});