淺談Sencha Touch初體驗(yàn)
作者：佚名
前不久基于JavaScript編寫的Ajax框架ExtJS,將現(xiàn)有的ExtJS整合JQTouch、Raphaël庫(kù)，推出適用于最前沿Touch Web的Sencha Touch框架，該框架是世界上第一個(gè)基于HTML5的Mobile App框架。
Sencha Touch可以讓你的Web App看起來(lái)像Native App。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5和CSS 3的 WEB標(biāo)準(zhǔn)，全面兼容Android和Apple iOS設(shè)備。
一、什么是Sencha Touch
Sencha Touch是一個(gè)應(yīng)用手持移動(dòng)設(shè)備的前端js框架，與extjs是同一個(gè)門派的，它繼承了extjs的優(yōu)點(diǎn)和缺點(diǎn)。功能很強(qiáng)大，效果很炫麗，效率不高。
二、例子來(lái)了
效果圖：Sencha touch官方一個(gè)list的example
PS：模擬器訪問本地server的地址是10.0.2.2:8080，而不是127.0.0.1:8080
1、導(dǎo)入touch的相關(guān)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
- /**
- * 前言：
- * 此例子來(lái)自sencha touch的官方example
- * 注釋用語(yǔ)如有不當(dāng)請(qǐng)見諒。
- */
- //相信這是每個(gè)頁(yè)面都是一樣的
- Ext.setup({
- tabletStartupScreen: 'tablet_startup.png',
- phoneStartupScreen: 'phone_startup.png',
- icon: 'icon.png',
- glossOnIcon: false,
- onReady : function() {
- //注冊(cè)一個(gè)名為“Contact”的模型，顯示的字段為firstName和lastName
- Ext.regModel('Contact', {
- fields: ['firstName', 'lastName']
- });
- //定義一個(gè)對(duì)象，有點(diǎn)類似Android里面的BaseAdapter
- var groupingBase = {
- itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
- selModel: {//選擇模型，單選；應(yīng)該還有多選
- mode: 'SINGLE',
- allowDeselect: true
- },
- grouped: true,//分組
- indexBar: true, //索引欄
- //定義點(diǎn)擊事件
- onItemDisclosure: {
- scope: 'test',
- //事件處理
- handler: function(record, btn, index) {
- alert('Disclose more info for ' + record.get('firstName'));
- }
- },
- //數(shù)據(jù)倉(cāng)庫(kù)
- store: new Ext.data.Store({
- model: 'Contact',//與上面注冊(cè)的模型對(duì)應(yīng)
- sorters: 'firstName',//排序字段
- //分組title顯示的數(shù)據(jù)源，為firstName的首字母
- getGroupString : function(record) {
- return record.get('firstName')[0];
- },
- //就是數(shù)據(jù)了
- 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'}
- ]
- })
- };
- /**
- * 應(yīng)該是判斷設(shè)備類型把
- * 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、部署到服務(wù)器訪問就行了。
END?。?！
小結(jié)：淺談Sencha Touch初體驗(yàn)的內(nèi)容介紹完了，希望通過(guò)本文的學(xué)習(xí)能對(duì)你有所幫助！
責(zé)任編輯：zhaolei
來(lái)源：
互聯(lián)網(wǎng)
