In extjs how to display variables on view?

Question

i am working in extjs4. I am working on weather module. i am retriving weather information with help of controller code as-

getWeather : function() {
        var getdata=this.getipaddress();
        console.log(getdata);
        var city = "pune";
        var urllink="http://api.wunderground.com/api/4ab310c7d75542f3/geolookup/conditions/q/IA/" + city + ".json";
        console.log(urllink);
        Ext.require('Ext.data.JsonP', function() {
            Ext.data.JsonP.request({
                //url : "http://api.wunderground.com/api/4ab310c7d75542f3/geolookup/conditions/q/IA/pune.json",
                url:urllink,
                success : function(parsed_json) {
                    var location = parsed_json['location']['city'];
                    var temp_c = parsed_json['current_observation']['temperature_string'];
                    alert("Current temperature in " + location + " is: "
                            + temp_c);
                            return temp_c;

                var viewObj=Ext.create('Balaee.view.sn.user.weather');
                var viewObj.show();
                }
            });
        });
    },

Now i want to display this temp_c variable's value and city on view. I have these both variables directly. I dont have any store related to it.Suppose i have view as-

Ext.define('Balaee.view.sn.user.weather',
{
        extend:'Ext.view.View',
        id:'weatherId',
        alias:'widget.weatherView',
        config:
        {
            tpl:'<tpl for=".">'+
                '<div id="main">'+
                '</br>'+                    
                '<b>City :- </b> {city} </br>'+
                '<b>Temp:- </b> {temp_c} </br>'+

                '</div>'+
                '</tpl>',
            itemSelector:'div.main',}

}); But above view is not displaying any value. So how to display these variables on view?

Answer 1

You can render template with Ext.container.Container ( Ext.view.View is not necessary if you don't have store) here is the example on your case:

Ext.define('Balaee.view.sn.user.weather',{
   extends:'Ext.container.Container',
   alias:'widget.weatherView',
   tpl:Ext.create('Ext.XTemplate',
        '<div id="main"></br>',
          '<b>City :- </b> {city} </br>',
          '<b>Temp:- </b> {temp_c} </br>',
        '</div>')
});

Then Ajax response can call it like below:

var viewObj=Ext.create('Balaee.view.sn.user.weather',{
   renderTo:'IdOfYourRenderingArea' // Or it can be Ext.getBody()
});
viewObj.update({city:location, temp_c:temp_c});

If you want render with dataview then you need store and model.