Sencha Touch Intro
-
Upload
shea-frederick -
Category
Documents
-
view
6.902 -
download
3
description
Transcript of Sencha Touch Intro
![Page 1: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/1.jpg)
Sencha Touch IntroWeb Based Native(ish) Apps
![Page 2: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/2.jpg)
![Page 3: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/3.jpg)
![Page 4: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/4.jpg)
![Page 5: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/5.jpg)
Setup Viewport Data View
![Page 6: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/6.jpg)
Setup
![Page 7: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/7.jpg)
Download The SDK
• Extract contents• Grab the CSS files from resources/css folder• Grab the JS files from the root folder
![Page 8: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/8.jpg)
Create Base HTML
<html><head><title>BmoreJS Mobile</title></head><body></body></html>
![Page 9: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/9.jpg)
Include CSS & JS
<link type="text/css" rel="stylesheet" href="sencha-touch-debug.css"> <script type="application/javascript" src="sencha-touch-debug.js"></script>
![Page 10: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/10.jpg)
Setup The Aplication
<script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
![Page 11: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/11.jpg)
Setup The Aplication
<script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
![Page 12: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/12.jpg)
Setup The Aplication
<script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
![Page 13: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/13.jpg)
320x460
![Page 14: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/14.jpg)
http://tinyurl.com/iosicon
57x57
![Page 15: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/15.jpg)
Setup The Aplication
<script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
![Page 16: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/16.jpg)
Viewport
![Page 17: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/17.jpg)
Create The Viewport
<script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
![Page 18: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/18.jpg)
Create The Viewport
<script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
![Page 19: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/19.jpg)
Create The Viewport
<script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
![Page 20: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/20.jpg)
Create The Viewport
<script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
![Page 21: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/21.jpg)
![Page 22: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/22.jpg)
Docked Items
this.viewport = new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: "toolbar", dock: "top", title: 'BmoreJS' }] });
![Page 23: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/23.jpg)
![Page 24: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/24.jpg)
Buttons
dockedItems: [{ xtype: "toolbar", ... items: [{ ui: 'back', text: 'back', handler: function(){} }] }]
![Page 25: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/25.jpg)
![Page 26: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/26.jpg)
Button UI
dockedItems: [{ xtype: "toolbar", ... items: [{ ui: 'back', text: 'back', handler: function(){} }] }]
![Page 27: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/27.jpg)
Standard Button UI's
Color Variations
confirm decline
![Page 28: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/28.jpg)
Data
![Page 29: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/29.jpg)
Data
StoreModel
Reader Proxy Source
![Page 30: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/30.jpg)
Model
Ext.regModel('Statuses', { fields: ['id_str','text'] });
![Page 31: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/31.jpg)
Model
Ext.regModel('Statuses', { fields: ['id_str','text'] });
![Page 32: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/32.jpg)
Model
Ext.regModel('Statuses', { fields: ['id_str','text'] });
![Page 33: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/33.jpg)
Store BmoreJS.stores.Statuses = new Ext.data.Store({ model: 'Statuses', proxy: { type: 'scripttag', url: 'http://api.twitter.com/1/statuses/user_timeline.json', extraParams: { screen_name: 'bmorejs' } }, autoLoad: true });
![Page 34: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/34.jpg)
Store BmoreJS.stores.Statuses = new Ext.data.Store({ model: 'Statuses', proxy: { type: 'scripttag', url: 'http://api.twitter.com/1/statuses/user_timeline.json', extraParams: { screen_name: 'bmorejs' } }, autoLoad: true });
![Page 35: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/35.jpg)
Store BmoreJS.stores.Statuses = new Ext.data.Store({ model: 'Statuses', proxy: { type: 'scripttag', url: 'http://api.twitter.com/1/statuses/user_timeline.json', extraParams: { screen_name: 'bmorejs' } }, autoLoad: true });
![Page 36: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/36.jpg)
View
![Page 37: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/37.jpg)
The List
this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
![Page 38: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/38.jpg)
The List
this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
![Page 39: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/39.jpg)
The List
this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
![Page 40: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/40.jpg)
The List
this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
![Page 41: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/41.jpg)
Templates
itemTpl: '<a href="{url}"><img src="{img}">{text}</a>',
![Page 42: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/42.jpg)
The List
this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
![Page 43: Sencha Touch Intro](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b46e234a79597a388b45a7/html5/thumbnails/43.jpg)