1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    5
    Vote Rating
    0
    tarun_sharma is on a distinguished road

      0  

    Default Unanswered: Sencha Touch tabPanel using dynamic JSON data

    Unanswered: 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.

    Code:
    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

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    43
    Answers
    4
    Vote Rating
    0
    bassjobsen is on a distinguished road

      0  

    Default


    Hello,

    You can start with a empty array:
    Code:
    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

    Code:
    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:

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

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
    BurhanB is on a distinguished road

      0  

    Default JSON in sencha touch

    JSON in sencha touch


    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

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi