Sencha Touch tabPanel using dynamic JSON data

[tarun_sharma]

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.TabPanel,{ 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

[bassjobsen]

Hello,

You can start with a empty array:

var items = [{}];

Render your TabBar with this empty array, so you can do a doLayout(); later.

NB when you docked your TabBar to bottom, it isn't visible in chrome. I don't know why, it seems to set correct.

Now your jsonp callback can set your items

Ext.setup( {
onReady: function() {
var items = [{}];

var bar = new Ext.TabBar({
    dock : 'top',
    ui   : 'dark',
    items: items
});

new Ext.Panel({
    dockedItems: [bar],
    fullscreen : true,
    html       : 'Test Panel',
    id : 'testPanel'
});

Ext.util.JSONP.request(
{         url: 'http://mobielapps/test.php', 
callbackKey: 'callback',  
                        scope: this,
                        callback: function (data) { 
bar.removeAll();//remove the empty item
bar.add(data.results);
bar.doLayout();
        }   ,  
});

   }

  });

test.php returns:

Ext.util.JSONP.callback({"results":[[{"text":"1st Button"},{"text":"2nd Button"}]]})

[BurhanB]

Hi, I am new to sencha touch . I want to use JSON is sencha touch but I have no idea about this.. Please help me to do this.. A working example will be very much pleased..
Thanx in advance