Sencha touch calendar swarmonline - refresh calendar event - extjs

Question

I'm trying to work with a Sencha Touch calendar extension (http://www.sencha.com/forum/showthread.php?156351-Ext.ux.TouchCalendar) Here is an example of what im using: http://www.swarmonline.com/Ext.ux.TouchCalendar/examples/simple-events-list.html
Am facing a problem here. when the app loads first time the events dots are missing..but when I resize my browser window, suddenly some event call happens and dots become visible and also at the same time its duplicating..
Am using their Simple events plugin. This is my view structure
Ext.define('WinReo.view.EventListPanel', {
extend: 'Ext.Panel',
//xtype:'EventListPanel',
requires: [
'Ext.dataview.List',
'Ext.layout.Fit'
],
alias: 'widget.EventListPanel',
config: {
// title : 'Events List',
layout : 'fit',
store:'WinReo.store.Events'
},
initialize: function(){
var store = Ext.getStore('Events');
store.load({
callback: function(records, operation, success) {
// the operation object contains all of the details of the load operation
console.log(records);
},
scope: this
});
this.callParent(arguments);
this.setItems([
{
xclass : 'Ext.ux.TouchCalendarView',
itemId : 'calendarView',
//minDate : Ext.Date.add((new Date()), Ext.Date.DAY, -40),
//maxDate : Ext.Date.add((new Date()), Ext.Date.DAY, 55),
viewMode : 'month',
weekStart : 0,
value : new Date(),
eventStore : Ext.getStore('Events'),
plugins : [Ext.create('Ext.ux.TouchCalendarSimpleEvents')]
/* plugins : [Ext.create('Ext.ux.TouchCalendarEvents', {
eventBarTpl: '{Days2Go}'
})]*/
},
{
xtype : 'list',
itemId : 'calendarlist',
docked : 'bottom',
onItemDisclosure:'true',
cls:'myList',
height : 100,
itemTpl : ['<tpl if ="Days2Go==0">',
'<div class="calendarlistred"> <div style="float:left; width: 45%">{PropertyAddr}</div><div style="float:left; width:45%">{TaskDesc}</div><div style="float:right; width:10%">{Days2Go}</div></div>',
'</tpl>',
'<tpl if ="Days2Go!=0">',
'<div> <div style="float:left; width: 45%">{PropertyAddr}</div><div style="float:left; width:45%">{TaskDesc}</div><div style="float:left; width:10%">{Days2Go}</div></div>',
'</tpl>'
],
store : Ext.create('Ext.data.Store', {
model: 'WinReo.model.Event',
data: []
}),
listeners: {
itemtap: function(dw, index,record, item, e){
window.open('http://blr.amt.in:8081/CRM_API/TaskCalendar.ashx?all_tasks=-1');
}
}
},
{
xtype : 'label',
html: '<div> <div style="float:left; width: 45%">Property</div><div style="float:left; width:45%">Task Description</div><div style="float:right; width:10%">Days to go</div></div>',
layout:'hbox',
docked : 'bottom',
cls:'calendarlistheader'
}
]);
}
});
Also I want I come to know that there is function there in TouchCalendarSimpleEvents.js
refreshEvents: function(){
if (!this.disabled && this.calendar.getViewMode() !== ‘DAY’) {
var datesStore = this.calendar.getStore();
…..
how can i call this function in my periodchange controller event ?
onPeriodChange: function(view, minDate, maxDate, direction){
Ext.Ajax.setDefaultHeaders({
'session_id' : localStorage.getItem("session_id")
});
console.log('periodchange');
console.log(view);
console.log(minDate);
var monthstartdate = Ext.Date.format(minDate, 'm/d/Y');
var url = 'http://blr.amt.in:8081/CRM_API/TaskCalendar.ashx?';
var urlafter = url + 'monthstartdate='+ monthstartdate;
// proxy change
var group_store = Ext.getStore("Events");
group_store.getProxy().setUrl(urlafter);
group_store.load();
var storecount = group_store.getCount();
this.refreshEvents(); // ***here i want to call refresh function***
}
Your help is much appreciated.