浅谈Sencha Touch初体验-sencha touch入门

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS 3的 WEB标准，全面兼容Android和Apple iOS设备。

一、什么是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

<!DOCTYPEhtml> 
<html> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html; charset=utf-8"> 
<metanamemetaname="viewport"content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> 
          6:<title>Sencha Touch List Example</title> 
<!-- import touch css and js --> 
<linkrellinkrel="stylesheet"href="touch/resources/css/sencha-touch.css"type="text/css"> 
<scripttypescripttype="text/javascript"src="touch/sencha-touch-debug.js">
           </script><scripttypescripttype="text/javascript"src="src/index.js"></script> 10:
</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  //全屏  
              }));  
         }  
      }  
  });

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

END！！！

小结：浅谈Sencha Touch初体验的内容介绍完了，希望通过本文的学习能对你有所帮助！