使用动态 JSON 数据的 Sencha Touch tabPanel

发布于 2024-12-07 05:32:40 字数 1165 浏览 0 评论 0原文

在我的应用程序中，第一页在底部显示一个 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 可用于动态创建选项卡。请引导我走向正确的方向。这种做法是否正确。我可以找一些例子吗？

塔伦

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

桃扇骨 2024-12-14 05:32:40

你有没有尝试过这个：

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

 }

Have you tried this:

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

 }

回复收藏 0 原文

~没有更多了~