先插入一条广告，博主新开了一家淘宝店，经营自己纯手工做的发饰，新店开业，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！

店名：

　　

经营:

　　发饰、头花、发夹、耳环等（手工制作）

网店：

　　

  

马上开始正题...

 

转自：

　　http://www.cnblogs.com/halzhang/archive/2010/11/20/1882497.html

前段时间忙于项目，由于项目用到技术以前都没接触过，所以前期的准备的时间很长很痛苦。主要用到ffmpeg，Android ndk，还涉及到一些网络协议，经过一段时间的研究，算是有点成效，自己在这方面也有了一点的积累。所以很久没写日志了，今天难得有空和有兴趣就看一下Sencha touch。官网：

一、什么是Sencha Touch？

Sencha Touch是一个应用手持移动设备的前端js框架，与extjs是同一个门派的，它继承了extjs的优点和缺点。功能很强大，效果很炫丽，效率不高。

二、例子来了

效果图：Sencha touch官方一个list的example

PS：模拟器访问本地server的地址是10.0.2.2:8080，而不是127.0.0.1:8080

1、导入touch的相关js，css以及资源文件

2、index.html

3.index.js

/**  * 前言：  * 此例子来自sencha touch的官方example  * 注释用语如有不当请见谅。  */ //相信这是每个页面都是一样的 Ext.setup({     tabletStartupScreen: 'tablet_startup.png',     phoneStartupScreen: 'phone_startup.png',     icon: 'icon.png',     glossOnIcon: false,     onReady : function() {         //注册一个名为“Contact”的模型，显示的字段为firstName和lastName         Ext.regModel('Contact', {             fields: ['firstName', 'lastName']         });                  //定义一个对象，有点类似Android里面的BaseAdapter         var groupingBase = {             itemTpl: '
       
        {firstName} {lastName}
       
',             selModel: {
      //选择模型，单选；应该还有多选                 mode: 'SINGLE',                 allowDeselect: true             },             grouped: true,//分组             indexBar: true, //索引栏                          //定义点击事件             onItemDisclosure: {                 scope: 'test',                 //事件处理                 handler: function(record, btn, index) {                     alert('Disclose more info for ' + record.get('firstName'));                 }             },             //数据仓库             store: new Ext.data.Store({                 model: 'Contact',//与上面注册的模型对应                 sorters: 'firstName',//排序字段                                  //分组title显示的数据源，为firstName的首字母                 getGroupString : function(record) {                     return record.get('firstName')[0];                 },                 //就是数据了                 data: [                     {firstName: 'Aaron', lastName: 'Conran'},                     {firstName: 'Ape', lastName: 'Evilias'},                     {firstName: 'Dave', lastName: 'Kaneda'},                     {firstName: 'Michael', lastName: 'Mullany'},                     {firstName: 'Abraham', lastName: 'Elias'},                     {firstName: 'Jay', lastName: 'Robinson'},                     {firstName: 'Tommy', lastName: 'Maintz'},                     {firstName: 'Ed', lastName: 'Spencer'},                     {firstName: 'Jamie', lastName: 'Avins'},                     {firstName: 'Ed', lastName: 'Spencer'},                     {firstName: 'Jamie', lastName: 'Avins'},                     {firstName: 'Aaron', lastName: 'Conran'},                     {firstName: 'Dave', lastName: 'Kaneda'},                     {firstName: 'Ape', lastName: 'Evilias'},                     {firstName: 'Dave', lastName: 'Kaneda'},                     {firstName: 'Michael', lastName: 'Mullany'},                     {firstName: 'Abraham', lastName: 'Elias'},                     {firstName: 'Jay', lastName: 'Robinson'},                     {firstName: 'Tommy', lastName: 'Maintz'},                     {firstName: 'Ed', lastName: 'Spencer'},                     {firstName: 'Jamie', lastName: 'Avins'},                     {firstName: 'Aaron', lastName: 'Conran'},                     {firstName: 'Dave', lastName: 'Kaneda'},                     {firstName: 'Michael', lastName: 'Mullany'},                     {firstName: 'Abraham', lastName: 'Elias'},                     {firstName: 'Jay', lastName: 'Robinson'},                     {firstName: 'Tommy', lastName: 'Maintz'},                     {firstName: 'Ed', lastName: 'Spencer'},                     {firstName: 'Jamie', lastName: 'Avins'},                     {firstName: 'Aaron', lastName: 'Conran'},                     {firstName: 'Dave', lastName: 'Kaneda'},                     {firstName: 'Michael', lastName: 'Mullany'},                     {firstName: 'Abraham', lastName: 'Elias'},                     {firstName: 'Jay', lastName: 'Robinson'},                     {firstName: 'Michael', lastName: 'Mullany'},                     {firstName: 'Abraham', lastName: 'Elias'},                     {firstName: 'Jay', lastName: 'Robinson'},                     {firstName: 'Zed', lastName: 'Zacharias'}                 ]             })         };           /**          * 应该是判断设备类型把          * Phone和其他类型有所不同，主要就是屏幕大小了          */         if (!Ext.is.Phone) {             new Ext.List(Ext.apply(groupingBase, {                 floating: true,                 width: 350,                 height: 370,                 centered: true,                 modal: true,                 hideOnMaskTap: false             })).show();         }         else {             new Ext.List(Ext.apply(groupingBase, {                 fullscreen: true  //全屏             }));         }     } });

 

店名：

　　

经营:

　　发饰、头花、发夹、耳环等（手工制作）

网店：

　　

  

4、部署到服务器访问就行了

----end-----