控制器中的 ExtJS 4.2 DatePicker 多选捕获事件

Question

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

• 我的 selectedDates 变量是一个对象，我不知道如何让它返回日期列表。
• 当您打开一个新窗口时，选择器会记住上次打开该窗口时之前选择的日期。我以为当你closeExt中的一个窗口时，组件被销毁？

有太多代码要粘贴到我的帖子中，但我创建了一个fiddle here。我在点击时放置了一个按钮，我想获取选定的日期 - 有人可以看看吗？

Answer 1

当你defineExt 中的一个类时，你在配置中指定的属性存在于原型链中，不是对象实例本身。除非在调用组件的构造函数时将新对象分配给 selectedDates，否则您正在修改对 single 对象的 same 引用。当您close 一个窗口时，对象被销毁，但原型/类定义仍然存在。

如果您想使用复合类型作为 "default" 值，那么您应该在对象的 constructor 方法中解决这些问题。例如：

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

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

---

获取selectedDates 是最简单的部分，它只是迭代对象并将值添加到数组的情况 - 此外，您唯一缺少的是选择器组件上的itemId，以便您可以轻松获得对它的引用，例如：

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

» updated fiddle

注意：您的小提琴中没有 MVC，但同样的原则也适用 - 您已经有一个可以触发的 handleSelectionChanged 方法自定义事件，例如：

handleSelectionChanged: function(cmp, date){
    // after existing logic ...
    this.fireEvent('dateselection', this.getSelectedDates());
}

现在选择器组件具有itemId，您的控制器将能够侦听该事件。