More Related Content
Similar to Building a Mobile App with Sencha Touch
Similar to Building a Mobile App with Sencha Touch (20)
More from James Pearce (19)
Building a Mobile App with Sencha Touch
- 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)
{..}
});
- 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
}]
});
- 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
