新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正
记得学习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
}
]
}
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(
'选择事件'
); } } }
文章结束给大家分享下程序员的一些笑话语录: 据说有一位软件工程师,一位硬件工程师和一位项目经理同坐车参加研讨会。不幸在从盘山公路下山时坏在半路上了。于是两位工程师和一位经理就如何修车的问题展开了讨论。
硬件工程师说:“我可以用随身携带的瑞士军刀把车坏的部分拆下来,找出原因,排除故障。”
项目经理说:“根据经营管理学,应该召开会议,根据问题现状写出需求报告,制订计划,编写日程安排,逐步逼近,alpha测试,beta1测试和beta2测试解决问题。”
软件工程说:“咱们还是应该把车推回山顶再开下来,看看问题是否重复发生。”