ExtJS 4.2 - 动态加载日期选择器值 - Newbie Q [英] ExtJS 4.2 - Dynamically Load Date Picker Value - Newbie Q
问题描述
ExtJS框架的工作并没有给出明显的使用变量的方法。我正在尝试使用disabledDates的数组动态加载datepicker：。我尝试了一大堆不同的方法，但总是会发现我尝试访问的任何变量都是未定义的。动态加载datepicker的配置的方法是什么？在控制器和组件之间使用变量的方法是什么？
The ExtJS Frame work does not give obvious way to use variables. I am trying to dynamically load the datepicker with an array for disabledDates:. I have tried a bunch of different ways but it always come down to the fact that any variable I try to access is undefined. What is the perfered method for dynamically loading the configs for datepicker? What is the perfered method to use variables between controller and components?
我的控制器中加载了数组。我如何使用它来设置我的日期选择器配置的值？目前我正在对dateArray中的某些日期进行硬编码，它正在工作。我想加载这个动态。
I have the array loaded in my controller. How do I use it to set values on my date picker configs? At the moment I am hardcoding some dates in dateArray and it is working. I want to load this dynamically.
控制器：
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：
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("|")+").*$"],
}]
}]
});
}
});
更新的控制器
UPDATED 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 Bullshit right fucking 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();
},
});
UPDATED VIEWPORT：
UPDATED 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（） ，它接受一个字符串数组的日期。如果您从商店加载中动态获取日期，那么您将需要查询您的组件并在商店加载中执行该方法。
You will want to use the datepicker method setDisabledDates() which accepts a string array of dates. If you are getting the dates dynamically from a store load, then you will want to query for your component and execute the method within the store load as well.
您可以添加一个 itemId 到指定的日期戳，以便于查询。
You can add an itemId to the specified datepicker to make it easier to query.
[{
xtype: 'datepicker',
minDate: new Date('01/02/2014'),
maxDate: new Date(),
disabledDates:["^("+dateArray.join("|")+").*$"],
itemId:'datePickerFld'
}]
然后查询您的商店加载并设置禁用的日期...
Then query within your store load and set the disabled dates...
var dtFld = Ext.ComponentQuery.query('#datePickerFld')[0];
dtFld.setDisabledDates(disabledDatesArray);
这篇关于ExtJS 4.2 - 动态加载日期选择器值 - Newbie Q的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
