问题
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 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?
回答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.
来源:https://stackoverflow.com/questions/24978039/extjs-4-2-datepicker-multiselect-catch-event-in-controller