sencha touch intro
DESCRIPTION
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 }] ... });
