如何在組建里面展示html，如何將數據和html模板結合起來展示
方法有很多，但是作為手機瀏覽器，性能比較差，現在比較多的方式是將展示頁面和數據綁定起來。例如knockoutjs 框架，sencha touch 則提供了一些最基本的綁定
就是每一個組建都有data 和tpl屬性，提供了界面ui和數據的綁定，從事實現Automatic UI Refresh（界面自動刷新）
When your data model's state changes, your UI updates automatically
因為這兩個屬性在Ext.Component 這個組件里面，而所有的組建都繼承了Component，所以所有的組建都具備Automatic UI Refresh功能
data 的存儲、傳遞有幾個很有用的方法
setData()-->更新數據，對應的uo也就更新了
setRecord()--》可以將數據存儲在一個組件中
getRecord()---》可以將存儲在一個組件中的數據取出來
以上一次的例子來 演示演示一下 上一次地址：http://www.cnblogs.com/qqloving/archive/2013/05/14/3078538.html
上一次的代碼 list的點擊事件
listeners:{
itemtap:function( obj, index, target, record, e, eOpts ){
//點擊事件
// 這幾個參數也比較有用
//index 當前單擊的 序號 可以根據序號在store中查找數據
//target 具體單擊的是那個元素，有時候需要精確到那個按鈕
//record 當前單擊的包含的數據 就是store中的一個model
alert('點擊事件');
}
}
可以看到里面有一個參數record，這就是存儲在list的一個item中的數據，因為這里是list綁定store，所以record就是一個model
這樣就可以直接獲取存儲在list的item中的數據，而不需要通過dom查找的方式，性能自然就提升了一些（ps：性能提升是我才出來的）
新創建一個view 用來作為 博客詳情頁面的數據展示頁面
Ext.define('GS2.view.blogsinfo', {
extend: 'Ext.Panel',
xtype: 'blogsinfo',
config: {
layout:'fit',
listeners:{
painted:function(obj, eOpts){
//頁面被繪制時觸發的事件，常用來填充組建里面的數據
var recoder=this.getRecord();
alert(recoder.data.title);
}
}
},
initialize:function(){
var head={
docked: 'top',
xtype: 'toolbar',
title: '博客詳情'
};
var blog={
xtype:'panel',
fullscreen:true,
html:'blog',
tpl:'<div style="padding: 20px;" id="blogdiv"><h1>{title}</h1><br><h2>@{author}</h2><br>{text}</div>',
id:'myblog',
scrollable:'both'
}
this.add([head,blog]);
}
});
修改剛才的list，實現頁面跳轉
listeners:{
itemtap:function( obj, index, target, record, e, eOpts ){
//點擊事件
// 這幾個參數也比較有用
//index 當前單擊的 序號 可以根據序號在store中查找數據
//target 具體單擊的是那個元素，有時候需要精確到那個按鈕
//record 當前單擊的包含的數據 就是store中的一個model
//創建新的view 作為博客詳情頁面
if(Ext.Viewport.blogsinfo==undefined)
{
Ext.Viewport.blogsinfo=Ext.create('GS2.view.blogsinfo');
}
//傳遞數據
Ext.Viewport.blogsinfo.setRecord(record);
//激活這個view
Ext.Viewport.setActiveItem(Ext.Viewport.blogsinfo);
}
}
現在在修改一下博客詳情頁面的事件
layout:'fit',
listeners:{
painted:function(obj, eOpts){
//頁面被繪制時觸發的事件，常用來填充組建里面的數據
var recoder=this.getRecord();
//alert(recoder.data.title);
Ext.getCmp("myblog").setData(recoder.data);
console.log('myblog');
}
}
調試下 數據已經可以顯示出來了
博客園 phonegap版rss閱讀器，每周更新一次
現在做了這么幾個頁面
1 博客園首頁
2 分類閱讀
3博主博文列表和新聞列表
博客詳情
新聞詳情
查看新聞和文章中的大圖
掃一掃（蘋果需要越獄）
