PDA

View Full Version : Navigation between Cards using JavaScript in Links



moosgummi
21 Jul 2010, 3:08 AM
Hello there,

this is my app and it works fine, but i want to have links that point to a specific panel, the nestedListController can find inside the structure.js, inside my first view. Can I attach an event listener to the UniversalUI which handles this?

index.js


Ext.ux.UniversalUI = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
items: [
{
cls: 'alberto-home',
html: [
'<div class="home-bg-layer-1">',
'<video src="img/Alberto_HW2011_trailer.mp4" autoplay loop></video>',
'<div class="home-bg-layer-3">',
'<a id="video-toggler" href="javascript:playPause();">Play Video</a>',
'<ul id="alberto-home-menu">',
'<li class="content-li alberto-home-collection"><a class="panelLink" panel="panel.albertoWearPants">a</a></li>',
'<li class="content-li alberto-home-golf"></li>',
'<li class="content-li alberto-home-stores"><a class="panelLink" panel="panel.storefinder">a</a></li>',
'<li class="buy-online-button"><a href="javascript:confirmOut(\'http://www.albertoshop.de/\')">Buy online</a></li>',
'</ul>',
'</div>',
'</div>'
]
}
],
initComponent : function() {
this.backButton = new Ext.Button({
hidden: true,
text: 'Back',
ui: 'back',
handler: this.onBackButtonTap,
scope: this
});
this.navigationButton = new Ext.Button({
hidden: Ext.platform.isPhone || Ext.orientation == 'landscape',
text: 'Navigation',
handler: this.onNavButtonTap,
scope: this
});
this.navigationBar = new Ext.Toolbar({
ui: 'dark',
dock: 'top',
title: this.title,
items: [this.backButton, this.navigationButton].concat(this.buttons || [])
});
this.navigationPanel = new Ext.NestedList({
items: this.navigationItems || [],
dock: 'left',
cls: 'navigation',
width: 250,
height: 456,
hidden: !Ext.platform.isPhone && Ext.orientation == 'portrait',
toolbar: Ext.platform.isPhone ? this.navigationBar : null,
listeners: {
listchange: this.onListChange,
scope: this
}
});
this.dockedItems = this.dockedItems || [];
this.dockedItems.unshift(this.navigationBar);
if (!Ext.platform.isPhone && Ext.orientation == 'landscape') {
this.dockedItems.unshift(this.navigationPanel);
}
else if (Ext.platform.isPhone) {
this.items = this.items || [];
this.items.unshift(this.navigationPanel);
}
this.addEvents('navigate');
Ext.ux.UniversalUI.superclass.initComponent.call(this);
},
onListChange : function(list, item) {
var myVideo = document.getElementsByTagName('video')[0];
if (myVideo.paused) {}
else {myVideo.pause();document.getElementById('video-toggler').innerHTML = 'Play Video';}
if (Ext.orientation == 'portrait' && !Ext.platform.isPhone && !item.items && !item.preventHide) {
this.navigationPanel.hide();
}
if (item.card) {
this.setCard(item.card, item.animation || 'slide');
this.currentCard = item.card;
if (item.text) {
this.navigationBar.setTitle(item.text);
}
if (Ext.platform.isPhone) {
this.backButton.show();
this.navigationBar.doLayout();
}
}
this.fireEvent('navigate', this, item, list);
},
onNavButtonTap : function() {
this.navigationPanel.showBy(this.navigationButton, 'fade');
},
onBackButtonTap : function() {
this.setCard(this.navigationPanel, {type: 'slide', direction: 'right'});
this.currentCard = this.navigationPanel;
if (Ext.platform.isPhone) {
this.backButton.hide();
this.navigationBar.setTitle(this.title);
this.navigationBar.doLayout();
}
this.fireEvent('navigate', this, this.navigationPanel.activeItem, this.navigationPanel);
},
onOrientationChange : function(orientation, w, h) {
Ext.ux.UniversalUI.superclass.onOrientationChange.call(this, orientation, w, h);
if (!Ext.platform.isPhone) {
var video = document.getElementsByTagName('video')[0];
var menu = document.getElementById('alberto-home-menu');
if (orientation == 'portrait') {
this.removeDocked(this.navigationPanel, false);
this.navigationPanel.hide();
this.navigationPanel.setFloating(true);
this.navigationButton.show();
video.style.width = '1600px';
video.style.height = '990px';
video.style.top = '-50px';
video.style.left = '-400px';
menu.style.paddingTop = '270px';
document.getElementById('video-toggler').style.bottom = '150px';
}
else {
this.navigationPanel.setFloating(false);
this.navigationPanel.show();
this.navigationButton.hide();
this.insertDocked(0, this.navigationPanel);
video.style.width = '1150px';
video.style.height = '1000px';
video.style.top = '-180px';
video.style.left = '-170px';
menu.style.paddingTop = '180px';
document.getElementById('video-toggler').style.bottom = '400px';
}
this.doComponentLayout();
this.navigationBar.doComponentLayout();
}
}
});

alberto.Main = {
init : function() {
this.ui = new Ext.ux.UniversalUI({
title: Ext.platform.isPhone ? 'ALBERTO' : 'ALBERTO iPad',
navigationItems: alberto.Structure,
listeners: {
navigate : this.onNavigate,
scope: this
}
});
},
onNavigate : function(ui, item) {
ui.navigationBar.doComponentLayout();
}
}

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


structure.js

alberto.Structure = [
{
text: 'ALBERTO Wear',
items: [
{
text: 'ALBERTO Folio',
card: panel.albertoFolio,
source: 'js/items/albertoFolio.js'
},
{
text: 'Hosen',
card: panel.albertoWearPants,
source: 'js/items/albertoWearPants.js'
},
{
text: 'G├╝rtel',
card: panel.albertoWearBelts,
source: 'js/items/albertoWearBelts.js'
}]
},
/*{
text: 'Golf Wear',
items: [{
text: 'Hosen',
card: panel.golfWearPants,
source: 'js/items/golfWearPants.js'
}]
},*/
{
text: 'Store Finder',
card: panel.storeFinder,
source: 'js/items/storeFinder.js'
},
{
text: 'ALBERTO Story',
card: panel.albertoStory,
source: 'js/items/albertoStory.js'
},
{
text: 'Kontakt',
card: panel.contact,
source: 'js/items/contact.js'
},
{
text: 'Login',
card: panel.login,
source: 'js/items/login.js'
}
];


Thanks for the help!

evant
21 Jul 2010, 3:17 AM
I don't really understand what you're asking. Are you asking how to dynamically load script files?

moosgummi
21 Jul 2010, 3:22 AM
Mhh I just want to switch the active card to another. I just found a thread that give me an idea how to do it. But I dont know how to apply it to my script. I have to use setCard() am I right? Here's a the thread I got my information from: http://www.sencha.com/forum/showthread.php?104511-Need-help-in-navigating-through-panels-and-about-SetCard-method&highlight=navigate

moosgummi
21 Jul 2010, 3:58 AM
Got it! I wrote my own little function called "setActiveCard":



function setActiveCard(card) {
// setting up shortcuts to the cards...
var cards = {
collection: {
card: alberto.Structure[0].items[1].card,
text: alberto.Structure[0].items[1].text
},
storefinder: {
card: alberto.Structure[1].card,
text: alberto.Structure[1].text
}
}
alberto.Main.ui.setCard(cards[card].card, 'slide')
alberto.Main.ui.currentCard = cards[card].card;
alberto.Main.ui.navigationBar.setTitle(cards[card].text);
}