HTML and CSS Reference
In-Depth Information
For your page setup, use the code:
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width; initial-scale=1.0;
maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"
/>
<link
rel=
"stylesheet"
href=
"/sencha-touch.css"
type=
"text/css"
>
<title>
List
</title>
<script
type=
"text/javascript"
src=
"/sencha-touch.js"
></script>
</head>
<body></body>
</html>
JavaScript handles setup of your component, as well as the entire app (
Figure 3-19
):
Ext
.
setup
({
tabletStartupScreen
:
'tablet_startup.png'
,
phoneStartupScreen
:
'phone_startup.png'
,
icon
:
'icon.png'
,
glossOnIcon
:
false
,
onReady
:
function
()
{
Ext
.
regModel
(
'Contact'
,
{
fields
:
[
'firstName'
,
'lastName'
]
});
var
groupingBase
=
{
itemTpl
:
'<div class="contact2"><strong>{firstName}</strong>
{lastName}</div>'
,
selModel
:
{
mode
:
'SINGLE'
,
allowDeselect
:
true
},
grouped
:
true
,
indexBar
:
false
,
onItemDisclosure
:
{
scope
:
'test'
,
handler
:
function
(
record
,
btn
,
index
)
{
alert
(
'Disclose more info for '
+
record
.
get
(
'firstName'
));
}
},
store
:
new
Ext
.
data
.
Store
({
model
:
'Contact'
,
sorters
:
'firstName'
,
getGroupString
:
function
(
record
)
{
return
record
.
get
(
'firstName'
)[
0
];
},
