sencha touch 学习笔记- 基本组件1-list和panel（2013网页装在兜里）
记得学习ASP.NET时.NET里面有一大堆组件，从头学到尾，学的吐血，最后发现，有用的组建只有一个repeater和objectdatasourse,sencha touch 和ASP.NET有很多相似的东西，例如统一框架、面向对象、组件化、事件模型等等，所以学习sencha touch时先从最常用最基本的组建list和panel入手，顺便了解他的mvc等东西
 |
 |
以读取博客园rss为例来了解list和panel相关的组建
首先用cmd创建项目，不会创建项目的点 这里
C:\Documents and Settings\Administrator>e: E:\>cd "E:\extjs\st" E:\extjs\st>sencha generate app GS1 ../GS1
创建好项目后开始修改里面住视图的代码
生成的视图继承了
extend: 'Ext.tab.Panel',
把他修改为我们的panel panel 的相关api文档：http://docs.sencha.com/touch/2.2.0/#!/api/Ext.Panel
改为
extend: 'Ext.Panel',
然后吧config 里面的属性全部清空，只保留items属性，内容为空
config: {
items: [
]
}
items属性是什么意思，开始我也不知道，知道后来看api发现了 http://docs.sencha.com/touch/2.2.0/#!/api/Ext.Panel-cfg-items
大概意思是用来放子组件的地方例如我们要添加的list组件就可以硬编码到items里面
list组件的 xtype 为：list
config: {
items: [
{
id:'feedlist',
xtype:'list',
itemTpl:'html模板'
}
]
}
list组件和asp.net里面的repeater组件一样，都是用来展示集合类数据的，对与每一个实体展示为html时，用js模板去展示，这个属性就是itemTpl，
sencha touch js模板很强大 api http://docs.sencha.com/touch/2.2.0/#!/api/Ext.XTemplate
在 ASP.NET 里面repeater用objectdatasourse作为数据源，
在sencha touch 里面 list 可以用store 作为自己的数据源，什么是store api：http://docs.sencha.com/touch/2.2.0/#!/api/Ext.data.Store
因为sencha touch 支持mvc，根据我的理解，一个model的集合就是store model api http://docs.sencha.com/touch/2.2.0/#!/api/Ext.data.Model
我们要读取博客园的rss，博客园的rss是xml的在phonegap里面只能跨域读取json的数据，所以得用谷歌的rssapi
https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=15&q=http://feed.cnblogs.com/blog/sitehome/rss
首先我们根据 rss创建一个model
Ext.define('GS2.model.feedlist', { extend: 'Ext.data.Model',//创建model要继承Ext.data.Model //store:'GS2.view.feedlist',//关联呆会我们要创建的store config: { fields: [//定义的模型包含哪些字段 { name: 'id', type: 'int' }, { name: 'title', type: 'string' }, { name: 'summary', type: 'string' }, { name: 'published', type: 'string' }, { name: 'author', type: 'string' }, { name: 'link', type: 'string' }, { name: 'blogapp', type: 'string' }, { name: 'diggs', type: 'string' }, { name: 'views', type: 'string' }, { name: 'comments', type: 'string' } ] } });
在模型里面支持这几种数据类型
然后在创建一个store作为刚才创建model的集合
Ext.define('GS2.store.feedlist', {
extend: 'Ext.data.Store',
config: {
model: 'GS2.model.feedlist',//关联的model
storeId:'mystore',//每一个store都要有一个storeId 方便查找和使用
// fields: ['title', 'link', 'author', 'contentSnippet', 'content', {
// name: 'leaf',
// defaultValue: true
// }],
//有事后服务器端返回的数据结构比较复杂，直接在这里定义一级节点比定义复杂的model方便些
autoLoad:true,//在实例化的时候是否载入数据，
// root: {
// leaf: false
// },
proxy:{
type: "jsonp",
url : "https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=15&q=http://feed.cnblogs.com/blog/picked/rss/",
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
});
定义好store后，就可以在view里面和list关联起来使用，就像asp.net里面repeater绑定一样
在view里面使用store和list关联起来的方法有常见的两种
1 直接创建并使用，例如在initialize 视图初始化里面
initialize:function(){
console.log(Ext.getStore('mystore'));
var list= {
xtype:'list',
//store:Ext.getStore('mystore'),//mystore 是可以的
store:Ext.create('GS2.store.feedlist'),
itemTpl:'1<div class="tweet"><span class="posted">{title}</span><h2>{author}</h2></div>',
id:'blogclasslist',
flex:1
};
this.add(list);
}
2 系统启动时初始化store，用的时候查找药用的store
系统启动时初始化store和model，在app.js 里面
requires: [
'Ext.MessageBox',
'Ext.TitleBar',
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'GS2.model.feedlist',
'GS2.store.feedlist'
],
models:[
'GS2.model.feedlist'
],
stores:[
'GS2.store.feedlist'
],
views: [
'Main'
],
requires 明确要依赖那些类，但是并不是实例化这些
下面的models 会实例化相关的model，stores 会实例化相关的stores，然后在view里面和list关联起来，这里有很隐秘的BUG，被坑了1天
2.1 在config的items里面配置，
config: {
layout:'vbox',
items: [
{
docked: 'top',
xtype: 'titlebar'
},{
xtype:'list',
store:'mystore',//Ext.getStore('mystore') 是不可以的
//注意这里必须是store的id
itemTpl:'2<div class="tweet"><span class="posted">{title}</span><h2>{author}</h2></div>',
id:'2blogclasslist',//组件的id方便上下文查找这个list
flex:2
}
]
}
2.2 在initialize 里面动态的添加组件，我比较喜欢这种方式
initialize:function(){
console.log(Ext.getStore('mystore'));
var list= {
xtype:'list',
store:Ext.getStore('mystore'),//mystore 是可以的
//store:Ext.create('GS2.store.feedlist'),
itemTpl:'1<div class="tweet"><span class="posted">{title}</span><h2>{author}</h2></div>',
id:'blogclasslist',
flex:1
};
this.add(list);
}
这样就简单的把list和store绑定了，store里面的数据改变了，和他绑定的list展示的内容也就变了
对与store中的每一个model都是用itemTpl 的模板展示出来 语法很简单 每个字段用{}括起来就好了
复杂的 if for 等 api：http://docs.sencha.com/touch/2.2.0/#!/api/Ext.XTemplate
对与 list 最基本的操作就是点击一个list触发的事件了
list 还有两个非常常用的事件，当然，其他事件也很有用
单击事件 和选择时间
首先是单击事件
var list= {
xtype:'list',
store:Ext.getStore('mystore'),//mystore 是可以的
//store:Ext.create('GS2.store.feedlist'),
itemTpl:'1<div class="tweet"><span class="posted">{title}</span><h2>{author}</h2></div>',
id:'blogclasslist',
flex:1,
listeners:{
itemtap:function( obj, index, target, record, e, eOpts ){
//点击事件
// 这几个参数也比较有用
//index 当前单击的 序号 可以根据序号在store中查找数据
//target 具体单击的是那个元素，有时候需要精确到那个按钮
//record 当前单击的包含的数据 就是store中的一个model
alert('点击事件');
}
}
};
然后是选择事件
{
xtype:'list',
store:'mystore',//Ext.getStore('mystore') 是不可以的
//注意这里必须是store的id
itemTpl:'2<div class="tweet"><span class="posted">{title}</span><h2>{author}</h2></div>',
id:'2blogclasslist',
flex:2,
listeners:{
select:function( obj, record, e, eOpts ){
//选择事件
alert('选择事件');
}
}
}
