事件组件sencha touch 学习笔记

来源：互联网发布：java创建一个学生类编辑：程序博客网时间：2024/04/30 23:02

新手发帖，很多方面都是刚入门，有错误的地方请大家见谅，欢迎批评指正

记得学习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(

'选择事件'

); } } }

文章结束给大家分享下程序员的一些笑话语录：据说有一位软件工程师，一位硬件工程师和一位项目经理同坐车参加研讨会。不幸在从盘山公路下山时坏在半路上了。于是两位工程师和一位经理就如何修车的问题展开了讨论。
硬件工程师说：“我可以用随身携带的瑞士军刀把车坏的部分拆下来，找出原因，排除故障。”
项目经理说：“根据经营管理学，应该召开会议，根据问题现状写出需求报告，制订计划，编写日程安排，逐步逼近，alpha测试，beta1测试和beta2测试解决问题。”
软件工程说：“咱们还是应该把车推回山顶再开下来，看看问题是否重复发生。”