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

来源：互联网发布：sql union 多列编辑：程序博客网时间：2024/05/01 08:13

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 altoq: '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了，结果如下：