1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
    RuanRabie is on a distinguished road

      0  

    Default Unanswered: Refreshing and displaying JSON in tab panels.

    Unanswered: Refreshing and displaying JSON in tab panels.


    Hi, I'm new to sencha and need a bit of help. Below is code for a 3 page tab panel. The second tab needs to display weather results from a JSON request. It also needs to be refreshed/reloaded every time you click on the weather button.

    I'm getting the data but having trouble to display it, I also need help with the refreshed/reloaded problem.

    Thank you in advance.

    Code:
    Ext.setup({
      onReady: function () {
     
        var favoritesTab = { title: 'Favorites', iconCls: 'favorites', html: 'Favorites' };
     
        var settingsTab = { title: 'Settings', iconCls: 'settings', html: 'Settings' };
     
        var weatherDisplay = new Ext.Component([
                            '<div class="demo-weather">',
                            '<tpl for=".">',
                            '<div class="day">',
                            '<div class="date">{date}</div>',
                            '<tpl for="weatherIconUrl"><img src="{value}"/></tpl>',
                            '<span class="temp">{tempMaxF}&deg;<span class="temp_low">{tempMinF}&deg;</span></span>',
                            '</div>',
                            '</tpl>',
                            '</div>'
                        ]);
     
        var weatherTab = { id: 'weatherTab', title: 'Weather', iconCls: 'team', layout: 'card',
          items: [{ html: 'Please Wait...' }, weatherDisplay],
          listeners: {
            activate: function () {
    //         this == Ext.getCmp('peopleTab')
    //         this.getLayout().setActiveItem(0);
              Ext.util.JSONP.request({
                url: 'http://free.worldweatheronline.com/feed/weather.ashx',
                callbackKey: 'callback',
                  params: {
                  key: '23f6a0ab24185952101705',
                  q: '94301', // Palo Alto
                  format: 'json',
                  num_of_days: 2
                },
                scope: this,
                callback: function (data) {
                  weatherDisplay.update(data.results);
                  this.getLayout().setActiveItem(1);
                }
              });
            }
          }
        };
     
        new Ext.TabPanel({ fullscreen: true,
          tabBar: { dock: 'bottom', layout: { pack: 'center'} },
          animation: { type: 'cube' },
          items: [favoritesTab, weatherTab, settingsTab]
        });
     
      }
    });
    Last edited by mitchellsimoens; 7 Feb 2012 at 6:35 AM. Reason: added [CODE] tags

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Is this a Sencha Touch question?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
    RuanRabie is on a distinguished road

      0  

    Default


    yes it is

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by RuanRabie View Post
    yes it is
    You posted in the Ext JS 4 Q&A forums. Would you like me to move this to the Sencha Touch 1 or Sencha Touch 2 Q&A forum?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
    RuanRabie is on a distinguished road

      0  

    Default


    Sencha Touch 2 please, sorry very new at this. Thanks

Thread Participants: 1