DatePicker在控制器中选择捕获事件

ExtJS 4.2 DatePicker Multiselect catch event in controller

本文关键字：事件 选择 控制器 DatePicker      更新时间：2023-09-26

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

  • 我的selectedDates变量是一个对象，我不知道如何使它返回日期列表。
  • 当你打开一个新窗口时，选择器会记住上次窗口打开时之前选择的日期。我认为，当你close在Ext的一个窗口，组件是销毁?
有一点太多的代码粘贴到我的帖子，但我已经创建了一个fiddle在这里。我放了一个按钮在哪里点击，我想得到选定的日期-有人可以看看吗?

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

如果你想使用复合类型作为"默认"值，那么你应该在对象的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() );
    }
}

»更新小提琴

注意:没有MVC在你的fiddle，但同样的原则适用-你已经有一个handleSelectionChanged方法，你可以触发一个自定义事件，例如:

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

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

相关文章：