PDA

View Full Version : Card Layout not switching for me



shizny
26 May 2011, 8:02 PM
Hello. I'm trying to use setActiveItem to switch the current view in my card layout based Panel. No dice, anybody have any ideas? Also, loginPage and loginButton are defined globally in another js file that is included and it is in scope.


var rootPanel;
var currentIndex = 0;
var moveCard = function() {
rootPanel.layout.setActiveItem(1);
}

new Ext.Application({
launch: function() {
rootPanel = new Ext.Panel({
fullscreen: true,
layout: 'card',
cls: 'rootPanel',
items: [loginPage,selectRetailerPage]
});

loginButton.addListener('click',moveCard);
}
});

Riaz
26 May 2011, 9:41 PM
use this -
Ext.getCmp('idOfRootPanel').setActiveItem(1);

shizny
27 May 2011, 8:03 AM
Thanks for the tip, I tried that and am still not getting the current selected card to change. Here is my full code. Maybe something I'm doing wrong with the panel configs that is preventing the card switch??



var rootPanel;
var currentIndex = 0;
var moveCard = function() {
Ext.getCmp('rootPanel').setActiveItem(1);
}

var loginLogo = new Ext.Panel({
html: 'Logo goes here'
});

var loginForm = new Ext.Panel({
items: [
{
xtype: 'textfield',
name: 'username',
label: 'username'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'password'
}
]
});

var loginButton = new Ext.Button({
ui: 'normal',
text: 'Login'
});

var loginPage = new Ext.Panel({
fullscreen: true,
layout: 'vbox',
items: [loginLogo, loginForm, loginButton]
});


var logoutButton = new Ext.Button({
ui: 'normal',
text: 'Logout'
});

var selectRetailerPage = new Ext.Panel({
fullscreen: true,
layout: 'vbox',
items: [logoutButton]
});

new Ext.Application({
launch: function() {
rootPanel = new Ext.Panel({
id: 'rootPanel',
fullscreen: true,
layout: 'card',
cls: 'rootPanel',
items: [loginPage,selectRetailerPage]
});

loginButton.addListener('click',moveCard);
}
});