PDA

View Full Version : Newbie: navigate to card from list



mydom
8 Sep 2011, 3:29 AM
Hi everybody,


i'm new to sencha touch and i'm playing around with it to lern how it works.


I have a problem navigating to a special card. I created a list with teams. If i click a team the special teams card should appear.
In my current version this only works when i add the special teams card to the items in app.js which is bad because the tab is shown.


How can i navigate to this special card without showing a tab of a special teams card?
The best solution would be something like this:


Ext.getCmp('teams').setActiveItem('team1');

But it seams that it's not possible to load a TabPanel into a List :(


Here is my current code:

index.html:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mobile</title>
<link rel="stylesheet" href="data/css/style.css" type="text/css">
<script type="text/javascript" src="data/js/sencha-touch.js"></script>
<script type="text/javascript" src="data/js/views/teams.js"></script>
<script type="text/javascript" src="data/js/views/team1.js"></script>
<script type="text/javascript" src="data/js/app.js"></script>
</head>
<body>
</body>
</html>



app.js:


Ext.ns('MobileApp');


Ext.setup({
icon: 'data/images/icon.png',
tabletStartupScreen: 'data/images/tablet_startup.png',
phoneStartupScreen: 'data/images/phone_startup.png',
glossOnIcon: false,
onReady: function() {
MobileApp.Main.init();
}
});


MobileApp.Main = {
init : function() {
new Ext.TabPanel({
id: 'app',
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'fade',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [
{ xtype: 'teams' }
]
});
}
}



teams.js:


Ext.ns('MobileApp.View', 'MobileApp.Store');


Ext.regModel('teamList', {
fields: ['teamID', 'teamName']
});


MobileApp.View.teams = Ext.extend(Ext.List, {
id: 'teams',
iconCls: 'team',
title: 'Teams',
xtype: 'list',
itemTpl: '{teamName}',
onItemDisclosure: {
handler: function(record, btn, index) {
Ext.getCmp('app').setActiveItem('team1');
}
},
store: MobileApp.Store.Team = new Ext.data.Store({
model: 'teamList',
sorters: 'teamID',
data: [
{teamID: '1', teamName: 'Team 1'},
{teamID: '2', teamName: 'Team 2'}
]
})
});


Ext.reg('teams', MobileApp.View.teams);



team1.js:


Ext.ns('MobileApp.View');


MobileApp.View.teamh1 = Ext.extend(Ext.TabPanel, {
id: 'team1',
layout: 'card',
items: [
{ title: 'One' },
{ title: 'Two' },
{ title: 'Three' }
]
});


Ext.reg('teamh1', MobileApp.View.teamh1);