ExtJS 4.2 DatePicker控制器中的Multiselect catch事件

时间:2014-07-27 04:53:58

标签: javascript extjs extjs4.2

我正在使用 MVC 架构在 ExtJS 4.2 中创建自定义日期选择器。这个想法是该组件允许用户一次输入/选择多个日期,但是我遇到了一些问题:

  • 我的selectedDates变量是一个对象,我不知道如何让它返回日期列表。
  • 当您打开一个新窗口时,选择器会记住上次打开窗口时之前选择的日期。我想当你在close Ext窗口{{1}}时,组件已销毁

要粘贴到我的帖子中有太多代码,但我已经创建了fiddle here。我点击了一个按钮,我希望获得所选日期 - 有人可以看看吗?

1 个答案:

答案 0 :(得分:3)

当您define Ext中的类时,您在配置中指定的属性存在于原型链中,对象实例本身。除非在调用组件的构造函数时将新对象分配给selectedDates,否则您正在修改对单个对象的相同引用。当您close窗口时,对象 会被销毁,但原型/类定义仍然存在。

如果要将复合类型用作"默认" 值,则应在对象的constructor方法中解决这些问题。例如:

Ext.define('MyClass', {
    extend: 'Ext.Component',
    // ...
    selectedDates: null,

    constructor: function(args){
        args = args || {};
        Ext.applyIf(args, {
            selectedDates: {}
        });
        this.callParent([args]);
    }
});

获取selectedDates是一件容易的事情,它只是一个迭代你的对象并将值添加到数组的情况 - 进一步说,你唯一缺少的是{{1在您的选择器组件上,以便您可以轻松获得对它的引用,例如:

itemId
Ext.define('HighlightableDatePicker', {

    // ...

    getSelectedDates: function(){
        var dates = [];
        Ext.iterate(this.selectedDates, function(key, val){
            dates.push(val);
        });
        dates.sort();
        return dates;
    }
});

» updated fiddle

注意:你的小提琴中没有 MVC ,但同样的原则适用 - 你已经拥有{{1}您可以触发自定义事件的方法,例如:

// 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() );
    }
}

既然选择器组件有一个handleSelectionChanged,你的控制器就能听到这个事件。