Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>dev</title>
<link rel="stylesheet" href="../sencha/resources/css-debug/sencha-touch.css" type="text/css" media="screen">
<script type="text/javascript" src="../sencha/sencha-touch-debug.js"></script>
<!-- application script -->
<script type="text/javascript">
Ext.setup(
{
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function()
{
Ext.regModel('MovieListing',
{
/*fields: [
{ name: 'name', type: 'string' },
{ name: 'summary', type: 'string' }
]*/
fields: ['name', 'summary']
});
var store = new Ext.data.Store({
model: 'MovieListing',
proxy: {
type: 'ajax',
url: 'getjson',
reader: {
type: 'json',
root: 'moviesitems'
}
},
});
var itemTemplate = new Ext.XTemplate({
tpl: new Ext.XTemplate(
'<tpl for=".">',
'{name}',
'</tpl>'
),
});
var movieList = new Ext.List(
{
fullscreen: true,
itemTpl: itemTemplate,
itemTpl: '{name} {summary}',
store: store
});
movieList.show();
movieList.on("itemtap", function(dataView, index, el, e)
{
var movie_name = dataView.store.getAt(index).data.name;
var movie_summ = dataView.store.getAt(index).data.summary;
this.overlay = new Ext.Panel(
{
modal:true,
centered:true,
floating:true,
width: 250,
height:250,
styleHtmlContent:true,
dockedItems:[{xtype:'toolbar', title:movie_name}],
dock:'top',
html:'<div style="margin-bottom:10px;"><b>Summary: </b><br/>' + movie_summ + "</div>"
});
this.overlay.show('pop');
});
var mydockedItems = [
{
xtype: 'toolbar',
dock: 'top',
title: 'next24.tv'
},
{
xtype: 'tabpanel',
layout: 'card',
dock: 'top',
fullscreen: true,
items:[
{ // 1 list with overlay
title: 'List',
items: [ movieList ]
},
{ // 2 about txt
title: 'About',
html: '<p>about text goes here</p>',
},
{ // 3 - form
title: "Settings",
xtype: "form",
items: [
{
xtype: "textfield",
name: "name",
label: "Name",
placeHolder: "your name here"
},
{
xtype: "emailfield",
name: "email",
label: "Email",
placeHolder: "you@example.com"
},
{
xtype: "urlfield",
name: "url",
label: "Url",
placeHr: "http://www.example.com"
},
{
xtype: "datepickerfield",
name: "date",
label: "Date",
picker: { yearFrom: 2010 }
}] // form items
}] // outer items
}] // mydockedItems
var appPanel = new Ext.Panel(
{
id: 'appPanel',
fullscreen: true,
dockedItems: mydockedItems
});
} // end onReady
});
</script>
</head>
<body></body>
</html>
json provides list where each item can open an overlay on itemtap
Reply With Quote