ExtJS 4.2 DatePicker Multiselect catch event in controller

Question

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:

• 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 in Ext, 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?

Answer 1

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.

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

---

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

» updated fiddle

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

Now that the picker component has an itemId, your controller will be able to listen for the event.