sencha touch 学习笔记- 基本属性-data 、Record和tpl(ps：博客园phonegap版rss 阅读器可以用了，在被窝里逛园子)
如何在组建里面展示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博主博文列表和新闻列表
博客详情
新闻详情
查看新闻和文章中的大图
扫一扫（苹果需要越狱）
