ExtJS 框架没有给出使用变量的明显方法。我正在尝试使用disabledDates:数组动态加载日期选择器。我尝试了很多不同的方法，但总是归结为这样一个事实:我尝试访问的任何变量都是未定义的。动态加载日期选择器配置的首选方法是什么？在 Controller 和组件之间使用变量的首选方法是什么？
我已将数组加载到我的 Controller 中。如何使用它来设置日期选择器配置上的值？目前我正在对 dateArray 中的一些日期进行硬编码，并且它正在工作。我想动态加载它。
Controller :
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores:['Users', 'dates'],
models:['User', 'date'],
views: ['user.List','user.Edit'],
init: function() {
Ext.getStore('dates').addListener('load',this.ondatesStoreLoad, this);
this.control(
{
'viewport > userlist':
{
itemdblclick: this.editUser,
},
'useredit button[action=save]':
{
click: this.updateUser
}
});
},
// ---------- handler Function declarations -------------
ondatesStoreLoad: function(me,records,success)
{
// ------ Gets the dates from dates store and loads an array
var store = this.getStore('dates');
sendDataArray = [];
store.each(function(record){
var recordArray = [record.get("unix_time_stamp")];
sendDataArray.push(recordArray);
});
// ------ Gets the dates from dates store and loads an array
},
editUser: function(grid, record)
{
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button)
{
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();
}
});
视口(viewport):
Ext.Loader.setConfig({enabled:true});
// This array is for testing.
dateArray = ["01/01/2014","01/06/2014","01/08/2014","01/20/2014"];
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[{
region: 'center',
title:'The Title',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items:
[{xtype: 'userlist'}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:
[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
minDate: new Date('01/02/2014'),
maxDate: new Date(),
disabledDates:["^("+dateArray.join("|")+").*$"],
}]
}]
});
}
});
更新 Controller :
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores:['Users', 'dates'],
models:['User', 'date'],
views: ['user.List','user.Edit'],
init: function() {
Ext.getStore('dates').addListener('load',this.ondatesStoreLoad, this);
this.control(
{
'viewport > userlist':
{
itemdblclick: this.editUser,
},
'useredit button[action=save]':
{
click: this.updateUser
}
});
},
// ---------- handler Function declarations -------------
ondatesStoreLoad: function(me,records,success)
{
// ------ Gets the dates from dates store and loads an array
var store = this.getStore('dates');
sendDataArray = [];
store.each(function(record){
var recordArray = [record.get("unix_time_stamp")];
sendDataArray.push(recordArray);
});
// ------ Set DatePicker here --------//
var dtFld = Ext.ComponentQuery.query('#datePickerFld')[0];
dtFld.setDisabledDates(["^(?!"+sendDataArray.join("|")+").*$"]);
dtFld.setMaxDate(new Date());
dtFld.setMinDate(new Date('05/01/2013'));
},
editUser: function(grid, record)
{
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button)
{
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();
},
});
更新的视口(viewport):
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
title:'The Title',
xtype: 'tabpanel',
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
store.load();
store.sync();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
最佳答案
您将需要使用datepicker方法setDisabledDates()它接受日期字符串数组。如果您从存储加载中动态获取日期，那么您将需要查询组件并在存储加载中执行该方法。
您可以为指定的日期选择器添加itemId，以方便查询。
[{
xtype: 'datepicker',
minDate: new Date('01/02/2014'),
maxDate: new Date(),
disabledDates:["^("+dateArray.join("|")+").*$"],
itemId:'datePickerFld'
}]
然后在您的商店负载中查询并设置禁用日期...
var dtFld = Ext.ComponentQuery.query('#datePickerFld')[0];
dtFld.setDisabledDates(disabledDatesArray);
关于variables - ExtJS 4.2 - 动态加载日期选择器值 - 新手 Q，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20925610/