Sencha Touch How to force viewport/Panel resize

Question

Am using sencha touch calendar plugin from the following site http://www.swarmonline.com/2011/11/ext-ux-touchcalendar/#comment-37096 The plugin is working fine.. But i have a problem to display the events dots onload.They are appearing only when i change the size of the browser window, i.e., maximize it or restore it. How can the problem be solved?

How can i call doComponentLayout(); inside my cotroller function ? or i want to resize viewport ? i dont know how to call this functions, here is my controller

onPeriodChange: function(view, minDate, maxDate, direction){


    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 touchcal = Ext.getCmp('EventListPanel');
    // touchcal.doLayout();
    //Ext.getCmp('EventListPanel').doComponentLayout();
    //Ext.Viewport.doLayout(); // ***getting an error msg Cannot call method 'doComponentLayout' of undefined*** 
    WinReo.viewport.doComponentLayout();

    var storecount = group_store.getCount();


},

please help me to solve this issue.. thanks in advance

Answer 1

I solved this issue.. The problem was the store is not aromatically updating in period change..

i Rewrite my function in this format. Refresh the touchcalendar view in store call back function

onPeriodChange: function(view, minDate, maxDate, direction){
        var monthstartdate = Ext.Date.format(minDate, 'm/d/Y');
        var url = 'http://blr.example.in:8081/CRM_API/TaskCalendar.ashx?';
        var urlafter = url + 'monthstartdate='+ monthstartdate;
        var group_store = Ext.getStore("Events");
        group_store.getProxy().setUrl(urlafter);
        group_store.load(function(){

            Ext.getCmp('touchcalendarview').refresh();
        });

}

Also sort out the other issue about panel layout change sencha touch 2.0 removed this functions dolayout(), docomponentlayout()..

Instead of that we can use setHeight(),getHeight() methods to get the layout..

Thanks for all the help...Happy coding...