zoukankan html css js c++ java

Sencha touch 初体验[转]

　　先插入一条广告，博主新开了一家淘宝店，经营自己纯手工做的发饰，新店开业，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　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,
                  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-----

查看全文

相关阅读:
mui的相关知识
 4. 本地的json格式调用方法
 DOM树节点的相关知识
 3.函数引用中“值传参”与“引用传参”的区别
 一，数组的创建数组的遍历
 重载<<
SendMessage、PostMessage、PeekMessage、GetMessage、PreTreslateMessage等
 TranslateMessage
怎样在整个类中恒定常量
 格式化输出

原文地址：https://www.cnblogs.com/qiongmiaoer/p/2991751.html