Downloaded 119 times
![new
Ext.Application({
launch:
function()
{
new
Ext.Panel({
fullscreen:
true,
dockedItems:
[{xtype:'toolbar',
title:'My
First
App'}],
layout:
'fit',
styleHtmlContent:
true,
html:
'<h2>Hello
World!</h2>I
did
it!'
});
}
});](https://image.slidesharecdn.com/senchatouch-111010174154-phpapp01/85/Building-a-Mobile-App-with-Sencha-Touch-15-320.jpg)
![Carousels
var
carousel
=
new
Ext.Carousel({
direction:
'horizontal',
indicator:
true,
items:
[
..
]
});](https://image.slidesharecdn.com/senchatouch-111010174154-phpapp01/85/Building-a-Mobile-App-with-Sencha-Touch-19-320.jpg)
![Sheets
var
sheet
=
new
Ext.ActionSheet({
items:
[
{
text:
'Delete
draft',
ui:
'decline'
},
{
text:
'Save
draft'
},
{
text:
'Cancel',
}
]
});
sheet.show();](https://image.slidesharecdn.com/senchatouch-111010174154-phpapp01/85/Building-a-Mobile-App-with-Sencha-Touch-20-320.jpg)
![Common patterns
1
var
list
=
new
Ext.List({
store:
store,
itemTpl:
'{firstName}
{lastName}',
grouped:
true,
indexBar:
true
});
var
panel
=
new
Ext.Panel({
fullscreen:
true,
layout:
'fit',
items:
[list]
});](https://image.slidesharecdn.com/senchatouch-111010174154-phpapp01/85/Building-a-Mobile-App-with-Sencha-Touch-21-320.jpg)
![Common patterns
2
var
panel
=
new
Ext.Panel({
fullscreen:
true,
layout:
'fit',
items:
[{
xtype:
'list',
store:
store,
itemTpl:
'{firstName}
{lastName}',
grouped:
true,
indexBar:
true
}]
});](https://image.slidesharecdn.com/senchatouch-111010174154-phpapp01/85/Building-a-Mobile-App-with-Sencha-Touch-22-320.jpg)
![new
Ext.Application({
launch:
function()
{
new
Ext.Panel({
fullscreen:
true,
dockedItems:
[{xtype:'toolbar',
title:'My
First
App'}],
layout:
'fit',
styleHtmlContent:
true,
html:
'<h2>Hello
World!</h2>I
did
it!'
});
}
});](https://image.slidesharecdn.com/senchatouch-111010174154-phpapp01/75/Building-a-Mobile-App-with-Sencha-Touch-15-2048.jpg)
![Carousels
var
carousel
=
new
Ext.Carousel({
direction:
'horizontal',
indicator:
true,
items:
[
..
]
});](https://image.slidesharecdn.com/senchatouch-111010174154-phpapp01/75/Building-a-Mobile-App-with-Sencha-Touch-19-2048.jpg)
![Sheets
var
sheet
=
new
Ext.ActionSheet({
items:
[
{
text:
'Delete
draft',
ui:
'decline'
},
{
text:
'Save
draft'
},
{
text:
'Cancel',
}
]
});
sheet.show();](https://image.slidesharecdn.com/senchatouch-111010174154-phpapp01/75/Building-a-Mobile-App-with-Sencha-Touch-20-2048.jpg)
![Common patterns
1
var
list
=
new
Ext.List({
store:
store,
itemTpl:
'{firstName}
{lastName}',
grouped:
true,
indexBar:
true
});
var
panel
=
new
Ext.Panel({
fullscreen:
true,
layout:
'fit',
items:
[list]
});](https://image.slidesharecdn.com/senchatouch-111010174154-phpapp01/75/Building-a-Mobile-App-with-Sencha-Touch-21-2048.jpg)
![Common patterns
2
var
panel
=
new
Ext.Panel({
fullscreen:
true,
layout:
'fit',
items:
[{
xtype:
'list',
store:
store,
itemTpl:
'{firstName}
{lastName}',
grouped:
true,
indexBar:
true
}]
});](https://image.slidesharecdn.com/senchatouch-111010174154-phpapp01/75/Building-a-Mobile-App-with-Sencha-Touch-22-2048.jpg)
Uploaded byJames Pearce
Building a Mobile App with Sencha Touch
Sencha Touch is a JavaScript framework for building rich mobile apps with web standards. It includes components for data access and MVC patterns, forms, scrolling, touch events, theming, and charts. Common patterns in Sencha Touch include using lists within panels, and defining lists inline within panels using the 'xtype' property. The document discusses embracing hybrid approaches, responsiveness, and offline capabilities when building mobile apps.
More Related Content
Similar to Building a Mobile App with Sencha Touch
Building a Mobile App with Sencha Touch
- 1. Sencha Touch @ jamespearce
- 2. A JavaScript framework for building rich mobile apps with web standards
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 14. <!DOCTYPE html> <html> <head> <title>Hello World</title> <script src="lib/touch/sencha-‐touch.js"></script> <script src="app/app.js"></script> <link href="lib/touch/resources/css/sencha-‐touch.css" rel="stylesheet" type="text/css" /> </head> <body></body> </html>
- 15. new Ext.Application({ launch: function() { new Ext.Panel({ fullscreen: true, dockedItems: [{xtype:'toolbar', title:'My First App'}], layout: 'fit', styleHtmlContent: true, html: '<h2>Hello World!</h2>I did it!' }); } });
- 17. Lists var list = new Ext.List({ store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true });
- 18. Nested Lists var list = new Ext.NestedList({ store: store, displayField: 'name', title: 'My List', updateTitleText: true, getDetailCard: function(record, parent) {..} });
- 19. Carousels var carousel = new Ext.Carousel({ direction: 'horizontal', indicator: true, items: [ .. ] });
- 20. Sheets var sheet = new Ext.ActionSheet({ items: [ { text: 'Delete draft', ui: 'decline' }, { text: 'Save draft' }, { text: 'Cancel', } ] }); sheet.show();
- 21. Common patterns 1 var list = new Ext.List({ store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true }); var panel = new Ext.Panel({ fullscreen: true, layout: 'fit', items: [list] });
- 22. Common patterns 2 var panel = new Ext.Panel({ fullscreen: true, layout: 'fit', items: [{ xtype: 'list', store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true }] });
- 23.
- 24.
- 25.
- 26. Web Compromise sites Web apps Hybrid apps Native apps Nativeness
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. $> phantomjs confess.js http://mysite.com/ CACHE MANIFEST # This manifest was created by confess.js # Time: Wed Sep 14 2011 10:14:45 GMT-‐0700 (PDT) # User-‐agent: Mozilla/5.0 ... CACHE: app/app.js app/yelp.js http://cdn.sencha.io/touch/1.1.0/sencha-‐touch.js http://maps.google.com/maps/api/js?sensor=true http://maps.gstatic.com/intl/en_us/mapfiles/api-‐3/6/4/main.js theming/app.css NETWORK: * http://github.com/jamesgpearce/confess
- 35.
- 36. built with Mobile Appsvs Web Technology
- 37.