sencha-touch1.1中的panel如何载入模板

最新推荐文章于 2012-08-07 15:19:42 发布

CF西西

最新推荐文章于 2012-08-07 15:19:42 发布

阅读量1.2k

点赞数

分类专栏： sencha touch 1.1 文章标签： callback class scroll json date html

本文链接：https://blog.csdn.net/xiaoguang44/article/details/7162264

版权

sencha touch 1.1 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

Sencha Touch 交流 QQ 群 224711028

我们首先仿照example中的ajax例子

在index.html上定义模板：

<textarea id="weather" class="x-hidden-display">
    <tpl for=".">
        <div class="day">
            <div class="date">{date}</div>
            <tpl for="weatherIconUrl"><img src="{value}"/></tpl>

            <span class="temp">{tempMaxF}°<span class="temp_low">{tempMinF}°</span></span>
        </div>
    </tpl>
</textarea>

然后在页面代码中使用json request方法将回调的参数载入模板并渲染到panel控件上

var tpl = Ext.XTemplate.from('weather');

  Ext.util.JSONP.request({
	url: 'http://free.worldweatheronline.com/feed/weather.ashx',
	callbackKey: 'callback',
	params: {                    
		key: '23f6a0ab24185952101705',
		// palo alto
		q: '94301',
		format: 'json',
		num_of_days: 5
	},
	callback: function(result) {
		result.aaa='bbb';
		var weather = result.data.weather;
		//alert(weather[0].aaa);
		weather[0].aaa='bbb';
		if (weather) {
			var html = tpl.applyTemplate(weather);
			Ext.getCmp('content').update(html);                        
		}
		else {
			alert('There was an error retrieving the weather.');
		}
	}
});
	
	var newPanel=new Ext.Panel({
	   fullscreen: true,
		id: 'content',
		scroll: 'both'
	})

如此便可得到经过渲染后的panel了，结果如下：