Tutorial 3: Sencha Weather App – add 2 tab panels with List component, itemTpl

• In tutorial 1 we created the sample Sencha Touch App
• In tutorial 2 we edited the sample app to contain 2 tab panels.

In this tutorial 3 we will finish the 2 tab panels.

• List component
• Attached to the store
• itemTpl

List Component

A list of items, with touch swipe of scrolling.

Store

A sencha touch store is the data source of you objects. These could be stored in HTML5 Local storage, memory or proxied to web servies.

The list component allows us to easily attached a store to a list. This allows us to populate the list items for a data source. This is all sorts of powerful.

itemTpl

We want to style each list of our List Component with our own HTML template. This is there the itemTPL comes in. As you can guess it’s the item template for the list component.

Ext.define('WeatherApp.view.Weather', {
    extend:'Ext.List',
    xtype:'weather',

    /* Configure the tab here */
    config:{
        title:'Weather', //title on the tab button
        iconCls:'locate', //icon on the tab button

        disableSelection: true,

        /* attach this list component to the weather store */
        store:'Weather',

        /* create a title bar for the tab panel */

        items: [
            {
                docked: 'top',
                xtype:'toolbar',
                title:'Weather',
                id: 'mainToolbar',
                cls: '',
                items: [

                    { xtype: 'spacer' },
                    {
                        xtype: 'button',
                        cls: 'refreshWeather',
                        iconCls: 'refresh',
                        id: 'refreshWeather'
                    }

                ]
            }
        ],

        /* markup for the data returned from the store */
        itemTpl:Ext.create('Ext.XTemplate',
            '</pre>
<div>',
 '
<h2>{name}, {[values.sys.country]}</h2>
',
 '
Time: {[this.timeFormat(new Date())]}

',
 '
Weather: {[values.weather[0].description]}

',
 '<img alt="" src="' + WeatherApp.app.openweatherimages + '{[values.weather[0].icon]}" />',

 '
Temperature: {[values.main.temp]} ℃

',
 '
Humidity: {[values.main.humidity]} %

',
 '
Min Temp: {[values.main.temp_min]} ℃

',
 '
Max Temp: {[values.main.temp_max]} ℃

',
 '</div>
<pre>',
            {
                timeFormat:function (date) {

                    var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];
                    var newDate = date;

                    return days[newDate.getDay() - 1] + " "
                            + newDate.getHours() + ":"
                            + newDate.getMinutes() + ":"
                            + newDate.getSeconds();
                }
            }
        )
    },

    initialize:function () {
        this.callParent();
    }

});

Points of interest:

The Weather Store that supplies the List Component.

The placeholders in the itemTpl I.E. {name)

The next step for us:

• We need to get the Weather Data from somewhere. We’ll sign up for the free Open Weather Map API
• Create the Model to describe the data return the from Open Weather Map API
• Create the Store to hold the above modelled objects.

Stay tuned for Tutorial 4.

CODE HERE:

You can clone to the branch and browse to the app to see the two tabs in action.

https://github.com/jamiegood/WeatherApp/tree/TwoPanelTabs