Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Sencha touch 初體驗

Sencha touch 初體驗

編輯：Android開發實例

前段時間忙於項目，由於項目用到技術以前都沒接觸過，所以前期的准備的時間很長很痛苦。主要用到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

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5:     <meta name="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>
   7:     <!-- import touch css and js -->
   8:     <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
   9:     <script type="text/javascript" src="touch/sencha-touch-debug.js"></script><script type="text/javascript" src="src/index.js"></script>
  10: </head>
  11: <body></body>
  12: </html>

3、index.js

   1: /**
   2:  * 前言：
   3:  * 此例子來自sencha touch的官方example
   4:  * 注釋用語如有不當請見諒。
   5:  */
   6: //相信這是每個頁面都是一樣的
   7: Ext.setup({
   8:     tabletStartupScreen: 'tablet_startup.png',
   9:     phoneStartupScreen: 'phone_startup.png',
  10:     icon: 'icon.png',
  11:     glossOnIcon: false,
  12:     onReady : function() {
  13:         //注冊一個名為“Contact”的模型，顯示的字段為firstName和lastName
  14:         Ext.regModel('Contact', {
  15:             fields: ['firstName', 'lastName']
  16:         });
  17:         
  18:         //定義一個對象，有點類似Android裡面的BaseAdapter
  19:         var groupingBase = {
  20:             itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
  21:             selModel: {//選擇模型，單選；應該還有多選
  22:                 mode: 'SINGLE',
  23:                 allowDeselect: true
  24:             },
  25:             grouped: true,//分組
  26:             indexBar: true, //索引欄
  27:             
  28:             //定義點擊事件
  29:             onItemDisclosure: {
  30:                 scope: 'test',
  31:                 //事件處理
  32:                 handler: function(record, btn, index) {
  33:                     alert('Disclose more info for ' + record.get('firstName'));
  34:                 }
  35:             },
  36:             //數據倉庫
  37:             store: new Ext.data.Store({
  38:                 model: 'Contact',//與上面注冊的模型對應
  39:                 sorters: 'firstName',//排序字段
  40:                 
  41:                 //分組title顯示的數據源，為firstName的首字母
  42:                 getGroupString : function(record) {
  43:                     return record.get('firstName')[0];
  44:                 },
  45:                 //就是數據了
  46:                 data: [
  47:                     {firstName: 'Aaron', lastName: 'Conran'},
  48:                     {firstName: 'Ape', lastName: 'Evilias'},
  49:                     {firstName: 'Dave', lastName: 'Kaneda'},
  50:                     {firstName: 'Michael', lastName: 'Mullany'},
  51:                     {firstName: 'Abraham', lastName: 'Elias'},
  52:                     {firstName: 'Jay', lastName: 'Robinson'},
  53:                     {firstName: 'Tommy', lastName: 'Maintz'},
  54:                     {firstName: 'Ed', lastName: 'Spencer'},
  55:                     {firstName: 'Jamie', lastName: 'Avins'},
  56:                     {firstName: 'Ed', lastName: 'Spencer'},
  57:                     {firstName: 'Jamie', lastName: 'Avins'},
  58:                     {firstName: 'Aaron', lastName: 'Conran'},
  59:                     {firstName: 'Dave', lastName: 'Kaneda'},
  60:                     {firstName: 'Ape', lastName: 'Evilias'},
  61:                     {firstName: 'Dave', lastName: 'Kaneda'},
  62:                     {firstName: 'Michael', lastName: 'Mullany'},
  63:                     {firstName: 'Abraham', lastName: 'Elias'},
  64:                     {firstName: 'Jay', lastName: 'Robinson'},
  65:                     {firstName: 'Tommy', lastName: 'Maintz'},
  66:                     {firstName: 'Ed', lastName: 'Spencer'},
  67:                     {firstName: 'Jamie', lastName: 'Avins'},
  68:                     {firstName: 'Aaron', lastName: 'Conran'},
  69:                     {firstName: 'Dave', lastName: 'Kaneda'},
  70:                     {firstName: 'Michael', lastName: 'Mullany'},
  71:                     {firstName: 'Abraham', lastName: 'Elias'},
  72:                     {firstName: 'Jay', lastName: 'Robinson'},
  73:                     {firstName: 'Tommy', lastName: 'Maintz'},
  74:                     {firstName: 'Ed', lastName: 'Spencer'},
  75:                     {firstName: 'Jamie', lastName: 'Avins'},
  76:                     {firstName: 'Aaron', lastName: 'Conran'},
  77:                     {firstName: 'Dave', lastName: 'Kaneda'},
  78:                     {firstName: 'Michael', lastName: 'Mullany'},
  79:                     {firstName: 'Abraham', lastName: 'Elias'},
  80:                     {firstName: 'Jay', lastName: 'Robinson'},
  81:                     {firstName: 'Michael', lastName: 'Mullany'},
  82:                     {firstName: 'Abraham', lastName: 'Elias'},
  83:                     {firstName: 'Jay', lastName: 'Robinson'},
  84:                     {firstName: 'Zed', lastName: 'Zacharias'}
  85:                 ]
  86:             })
  87:         };
  88:  
  89:         /**
  90:          * 應該是判斷設備類型把
  91:          * Phone和其他類型有所不同，主要就是屏幕大小了
  92:          */
  93:         if (!Ext.is.Phone) {
  94:             new Ext.List(Ext.apply(groupingBase, {
  95:                 floating: true,
  96:                 width: 350,
  97:                 height: 370,
  98:                 centered: true,
  99:                 modal: true,
 100:                 hideOnMaskTap: false
 101:             })).show();
 102:         }
 103:         else {
 104:             new Ext.List(Ext.apply(groupingBase, {
 105:                 fullscreen: true  //全屏
 106:             }));
 107:         }
 108:     }
 109: });
  4、部署到服務器訪問就行了

 

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android中執行java命令的方法及java代碼執行並解析shell命令 Android 中文 SDK （48） —— Filter.FilterListener android 中文 api （71） —— BluetoothServerSocket Android屏幕待機時間的獲取和設置示例 listview改變字體大小實例講解 android UI進階之android中隱藏的layout 抽屜的使用方法
Android Gestures/手勢

Android提供了特殊類型的觸摸屏事件，如掐，雙擊，滾動，長按和退縮。
android 網絡連接處理分析

在Android中，可以有多種方式來實現網絡編程： 創建URL，
Android加載Spinner

可以顯示在的Android任務，通過加載進度條的進展。進度條有兩種形狀。
Android本地化

Android應用程序可以在許多不同地區的許多設備上運行。為了使應用程序
閱讀排行版
Copyright © Android教程網 All Rights Reserved