问题描述
我正在使用 MVC 架构在 ExtJS 4.2 中创建自定义日期选择器.这个想法是该组件允许用户一次输入/选择多个日期,但是我遇到了一些问题:
I am creating a custom date-picker in ExtJS 4.2 using the MVC architecture. The idea is that the component allows a user to input / select multiple dates at a time however I am having a few issues:
- 我的
selectedDates
变量是一个对象,我不知道如何让它返回日期列表. - 当您打开一个新窗口时,选择器会记住上次打开该窗口时之前选择的日期.我认为当你在
Ext
中close
一个窗口时,组件被破坏?
- My
selectedDates
variable is an object and I don't how how to make it return the list of dates. - When you open a new window the picker remembers the previously selected dates from the last time that the window was open. I thought that when you
close
a window inExt
, the components are destroyed?
要粘贴到我的帖子中的代码有点多,但我创建了一个 在这里小提琴.我在点击时放置了一个按钮,我想获取所选日期 - 有人可以看看吗?
There is a little too much code to paste into my post but I've created a fiddle here. I placed a button where on click, I want to get the selected dates - could someone please take a look?
推荐答案
当你在 Ext 中define
一个类时,你在配置中指定的属性存在于原型链中,不强> 对象实例本身.除非在调用组件的构造函数时将新对象分配给 selectedDates
,否则您正在修改对 单个 对象的 same 引用.当您关闭
一个窗口时,对象被销毁,但原型/类定义仍然存在.
When you define
a class in Ext the properties you specify in the configuration exist in the prototype chain, not the object instance itself. Unless a new object is assigned to selectedDates
when the component's constructor is called then you are modifying a the same reference to a single object. When you close
a window the object is destroyed but the prototype / class-definition still exists.
如果您想使用复合类型作为默认" 值,那么您应该在对象的constructor
方法中解决这些问题.例如:
If you want to use composite types as "default" values then you should resolve these in the object's constructor
method. For example:
Ext.define('MyClass', {
extend: 'Ext.Component',
// ...
selectedDates: null,
constructor: function(args){
args = args || {};
Ext.applyIf(args, {
selectedDates: {}
});
this.callParent([args]);
}
});
获取您的 selectedDates
是简单的部分,这只是迭代对象并将值添加到数组的情况 - 此外您唯一缺少的是 itemId
在您的选择器组件上,以便您可以轻松获取对它的引用,例如:
Getting your selectedDates
is the easy part, it's just a case of iterating over your object and adding the values to an array - further to that the only thing you are missing is an itemId
on your picker component so that you can easily obtain a reference to it, for example:
Ext.define('HighlightableDatePicker', {
// ...
getSelectedDates: function(){
var dates = [];
Ext.iterate(this.selectedDates, function(key, val){
dates.push(val);
});
dates.sort();
return dates;
}
});
// Ext.Window items config...
{
xtype: 'highlightdate',
itemId: 'datePicker'
},
{
xtype: 'button',
text: 'Get Selected Dates',
handler: function(){
var picker = this.up('window').down('#datePicker');
console.log( picker.getSelectedDates() );
}
}
注意:您的小提琴中没有 MVC 但同样的原则适用 - 您已经有了 handleSelectionChanged
可以触发自定义事件的方法,例如:
Note: there's no MVC in your fiddle but the same principle applies - you already have a handleSelectionChanged
method where you could fire a custom event, for example:
handleSelectionChanged: function(cmp, date){
// after existing logic ...
this.fireEvent('dateselection', this.getSelectedDates());
}
现在选择器组件有一个 itemId
,您的控制器将能够监听事件.
Now that the picker component has an itemId
, your controller will be able to listen for the event.
这篇关于ExtJS 4.2 DatePicker Multiselect 在控制器中捕获事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!