在extjs中如何在视图上显示变量?

时间:2013-04-23 07:02:16

标签: variables view extjs4

我在extjs4工作。我正在研究天气模块。我正在使用控制器代码重新获取天气信息 -

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();
                }
            });
        });
    },

现在我想在视图中显示此temp_c变量的值和城市。我直接有这两个变量。我没有任何与之相关的商店。假设我有观点 -

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',}

}); 但上面的视图没有显示任何值。那么如何在视图上显示这些变量?

1 个答案:

答案 0 :(得分:2)

您可以使用Ext.container.Container渲染模板(如果您没有存储,则无需Ext.view.View) 以下是您案例中的示例:

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

然后Ajax响应可以像下面这样调用它:

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

如果您想要使用dataview进行渲染,那么您需要存储和模型。