記得學習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('選擇事件');
}
}
}