Sencha Touch tabPanel 使用动态 JSON 数据答案

【问题标题】：Sencha Touch tabPanel using dynamic JSON dataSencha Touch tabPanel 使用动态 JSON 数据
【发布时间】：2011-09-29 13:56:05
【问题描述】：

在我的应用程序中，第一页在底部显示了一个 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() 函数将项目添加到此选项卡面板，该函数将创建选项卡项并返回数组。但问题是渲染事件总是先触发，然后是 JSON 请求回调，因此没有 jsondata 可用于动态创建选项卡。请引导我走向正确的方向。这种方法是否正确。我可以找任何例子吗？

塔伦

【问题讨论】：

标签： tabs sencha-touch extjs

【解决方案1】：

你试过了吗：

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

 }

【讨论】：

我在添加项目后尝试了 doLayout 调用。选项卡数据可用，但选项卡未正确呈现，我的意思是 css 搞砸了。
callback: function(result) { console.log("Inside callback"); TMDemo.tabBarData = 结果； TMDemo.views.mainTabBar.add(TMDemo.views.mainTabBar.addItemsBasedOnJsonData()); TMDemo.views.mainTabBar.doLayout(); }
我也尝试了doComponentLayout，但这也有同样的效果，也没有显示第一个标签内容。
它很奇怪..尝试在回调中实际创建整个 TabPanel ......但你不应该这样做。你能用你的 Json 数据和 addItemsBasedOnJsonData 方法更新你的问题吗？
基本上每当我从 callbak 函数调用 add item 时，选项卡都不会正确呈现。标签栏元素高度渲染为 1px