Results 1 to 5 of 5

Thread: Refreshing and displaying JSON in tab panels.

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    Is this a Sencha Touch question?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
      0  

    Default

    yes it is

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
      0  

    Default

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •