Refreshing and displaying JSON in tab panels.

[RuanRabie]

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.

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

[mitchellsimoens]

Is this a Sencha Touch question?

[RuanRabie]

yes it is

[mitchellsimoens]

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?

[RuanRabie]

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