Building a Mobile App with Sencha Touch

A JavaScript framework
for building
rich mobile apps
with web standards

Kitchen Sink

http://sencha.com/x/5e

<!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>

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!'

});

}

});

Lists
var
list
=
new
Ext.List({

store:
store,

itemTpl:
'{firstName}
{lastName}',

grouped:
true,

indexBar:
true
});

Nested Lists
var
list
=
new
Ext.NestedList({

store:
store,

displayField:
'name',

title:
'My
List',

updateTitleText:
true,

getDetailCard:

function(record,
parent)
{..}
});

Carousels
var
carousel
=
new
Ext.Carousel({

direction:
'horizontal',

indicator:
true,

items:
[

..

]
});

Sheets
var
sheet
=
new
Ext.ActionSheet({

items:
[

{

text:
'Delete
draft',

ui:
'decline'

},
{

text:
'Save
draft'

},
{

text:
'Cancel',

}

]
});

sheet.show();

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]
});

Common patterns
2
var
panel
=
new
Ext.Panel({

fullscreen:
true,

layout:
'fit',

items:
[{

xtype:
'list',

store:
store,

itemTpl:
'{firstName}
{lastName}',

grouped:
true,

indexBar:
true

}]
});

Web
Compromise

sites
Web
apps
Hybrid
apps
Native
apps

Nativeness

http://sencha.com/x/cy
http://sencha.com/x/de

http://phonegap.github.com/weinre

$>
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

built with
Mobile Apps vs Web Technology

Building a Mobile App with Sencha Touch

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Building a Mobile App with Sencha Touch

Similar a Building a Mobile App with Sencha Touch (20)

Más de James Pearce

Más de James Pearce (19)

Último

Último (20)

Building a Mobile App with Sencha Touch