Question

在我的应用程序中，第一页显示底部的tabPanel。但是标签，标签和图标的数量是来自json请求的动态内容。我想知道该怎么做。这是我试过的。

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();
    }
}

}）;

这里tabbar数据来自tabbar.json（虚拟数据实际将是一些URL）。我通过addItemsBasedOnJsonData（）函数将项添加到此tabpanel，该函数将创建选项卡项并返回数组。但问题是渲染事件总是首先触发JSON请求回调，因此没有jsondata可用于动态创建选项卡。请引导我走向正确的方向。这种方法是否正确。我可以找一些例子吗。

塔伦

Answer 1

你试过这个：

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

 }

Sencha Touch tabPanel使用动态JSON数据

1 个答案: