Sencha Touch Intro Web Based Native(ish) Apps
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Sencha Touch IntroWeb Based Native(ish) Apps
Setup Viewport Data View
Setup
Download The SDK
• Extract contents• Grab the CSS files from resources/css folder• Grab the JS files from the root folder
Create Base HTML
<html><head><title>BmoreJS Mobile</title></head><body></body></html>
Include CSS & JS
<link type="text/css" rel="stylesheet" href="sencha-touch-debug.css"> <script type="application/javascript" src="sencha-touch-debug.js"></script>
Setup The Aplication
<script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
Setup The Aplication
<script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
Setup The Aplication
<script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
320x460
http://tinyurl.com/iosicon
57x57
Setup The Aplication
<script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
Viewport
Create The Viewport
<script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
Create The Viewport
<script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
Create The Viewport
<script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
Create The Viewport
<script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
Docked Items
this.viewport = new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: "toolbar", dock: "top", title: 'BmoreJS' }] });
Buttons
dockedItems: [{ xtype: "toolbar", ... items: [{ ui: 'back', text: 'back', handler: function(){} }] }]
Button UI
dockedItems: [{ xtype: "toolbar", ... items: [{ ui: 'back', text: 'back', handler: function(){} }] }]
Standard Button UI's
Color Variations
confirm decline
Data
Data
StoreModel
Reader Proxy Source
Model
Ext.regModel('Statuses', { fields: ['id_str','text'] });
Model
Ext.regModel('Statuses', { fields: ['id_str','text'] });
Model
Ext.regModel('Statuses', { fields: ['id_str','text'] });
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 });
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 });
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 });
View
The List
this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
The List
this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
The List
this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
The List
this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
Templates
itemTpl: '<a href="{url}"><img src="{img}">{text}</a>',
The List
this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
Related Documents
