淺談Sencha Touch初體驗
作者：佚名
前不久基于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
來源：
互聯網
