Sencha Touch tabPanel using dynamic JSON data

In my application the first page shows a tabPanel at the bottom. But number of tabs, their labels and icons are dynamic content coming from a json request. I am wondering how to do it. Here is what i tried.

TMDemo = new Ext.Application({
name: 'TMDemo',
launch: function(){
    this.views.mainTabBar = new this.views.MainTabBar();

}

});

TMDemo.views.MainTabBar = Ext.extend(Ext.TabPan开发者_StackOverflow社区el,{
fullscreen: true,
 tabBar:{
    dock:'bottom',
    layout:{
        pack:'center'
    }
 },
 addItems: function(){
        this.add(addItemsBasedOnJsonData());
        this.doLayout(); // important
},
listeners: {
    beforerender:function(){
        Ext.util.JSONP.request({
        url: 'app/data/tabbar.json',
        callbackKey: 'callback',
        callback: function(result) {
         console.log("Inside callback");    
         TMDemo.tabBarData = result;                              
        }
    });
}
    render: function(){
        console.log("Inside render");
        this.addItems();
    }
}

});

Here the tabbar data is coming from tabbar.json (dummy data actual will be some URL). I am adding items to this tabpanel through addItemsBasedOnJsonData() function which will create the tab items and returns the array. But the problem is render event always fire first then the JSON request callback, so no jsondata available to create tabs dynamically. Please guide me to a right direction. Whether this approach is right. Can i have any example to look for.

Tarun

Have you tried this:

callback: function(result) {
         console.log("Inside callback");    
         TMDemo.tabBarData = result;
         TMDemo.views.mainTabBar.add(TMDemo.views.mainTabBar.addItemsBasedOnJsonData());

 }