先插入一条广告，博主新开了一家淘宝店，经营自己纯手工做的发饰，新店开业，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
小鱼尼莫手工饰品店
经营:
发饰、头花、发夹、耳环等（手工制作）
网店：
http://shop117066935.taobao.com/
马上开始正题...
转自：
http://www.cnblogs.com/halzhang/archive/2010/11/20/1882497.html
前段时间忙于项目，由于项目用到技术以前都没接触过，所以前期的准备的时间很长很痛苦。主要用到ffmpeg，Android ndk，还涉及到一些网络协议，经过一段时间的研究，算是有点成效，自己在这方面也有了一点的积累。所以很久没写日志了，今天难得有空和有兴趣就看一下Sencha touch。官网：http://www.sencha.com/
一、什么是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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<title>Sencha Touch List Example</title>
<!-- import touch css and js -->
<link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="touch/sencha-touch-debug.js"></script><script type="text/javascript" src="src/index.js"></script>
</head>
<body></body>
</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: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>', 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 //全屏 })); } } });
店名：
小鱼尼莫手工饰品店
经营:
发饰、头花、发夹、耳环等（手工制作）
网店：
http://shop117066935.taobao.com/
4、部署到服务器访问就行了
----end-----
