淺談Sencha Touch初體驗

作者：佚名 2011-09-05 10:20:21

前不久基于JavaScript編寫的Ajax框架ExtJS,將現有的ExtJS整合JQTouch、Raphaël庫，推出適用于最前沿Touch Web的Sencha Touch框架，該框架是世界上第一個基于HTML5的Mobile App框架。

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初體驗的內容介紹完了，希望通過本文的學習能對你有所幫助！

責任編輯：zhaolei 來源：互聯網

Sencha Touch APP