Sencha Touch: I see contents from my datastore into the view only after I refresh the webpage for second time. Why?

I am developing a simple app where I get the data using YQL and store the data in the localhost database. I am successfully able to store the data in the localhost database and able to retrieve it too. The only issue is I see my data displayed only after I refresh it for the second time, and I cannot understand why!

What I mean by second refresh is that I delete entries from my localhost database and run the code. So first time I get a blank view with no data. After a refresh I see my data being populated on the webpage.

Here is my controller

 Ext.regController('Index', {
   index: function () {

   var mainStoryStore = Ext.getStore('MainStoryStore');

   if(!mainStoryStore.first())
   {
     Ext.YQL.makeYqlRequest('news');
     this.retrieveContent(mainStoryStore);
   }
   else
   {
     this.retrieveContent();
   } 

  },

 retrieveContent: function () {
   var mainStoryStore = Ext.getStore('MainStoryStore');
    if(!this.mainView) {
      this.mainView = this.render({
      xtype: 'Main'
    });
    this.application.viewport.setActiveItem(this.mainView);
   }
   else 
   {
     this.application.viewport.setActiveItem(this.mainView,{
       type: 'slide',
       direction: 'right'
     });  
  }


 Ext.getCmp('topcontent').update(Ext.getStore('MainStoryStore').data.items);


  console.log(Ext.getStore('MainStoryStore').data.items);  //When I do this I get data from the store both in my first and second refresh


  Ext.getCmp('content').update(Ext.getStore('MainStoryStore').data.items);

  }, 

});

Here is one of my view. The otherView with id:'content' has similar structure and template.

 MyApp.views.topTile = Ext.extend (Ext.Panel, {
  dock:'top',
  id:'topcontent',
  height:214,

  showAnimation:{
    type:'fade',
    duration:700,
  },
 // onItemDisclosure: true,

initComponent: function () {
  itemTpl = new Ext.XTemplate(
      //'<tpl if="item">',
          '<tpl for=".">',
           '<tpl if="internalId === 1">',
          '<tpl for="data">',
              '<div class="catImage">',
                  '<a href="#" onclick=\'javascript:goToURL(\"{link}\");\'><img src="{mimage}"></a>',
                  '<div class="{adClass} titleBack"></div>',
                  '<a href="#" onclick=\'javascript:goToURL(\"{link}\");\' class="{adC开发者_StackOverflowlass} catTitle {custClass}">{title}</a>',
              '</div>',
              '<div class="catBox">',
                  '<span class="catDesc">{description}</span>',
                  '<span class="catDate">{pubDate}</span>',
                  '<span class="moBo"><a href="#" onclick=\'javascript:goToURL(\"{link}\");\'>More</a></span>',
              '</div>',
          '</tpl>',
          '</tpl>',
          '<div class="ender"></div><div class="ender"></div>',
      '</tpl>'
    ),

  Ext.apply(this,{
    tpl: itemTpl,


  }),


   MyApp.views.topTile.superclass.initComponent.apply(this, arguments);
 },

});