PDA

View Full Version : Switching Panels using button



Roger_K
5 Jun 2011, 1:57 AM
Hello, I have a tabPanel which has 5 tabs, each of which has 1 Panel. What I want is for example I have a button in Panel 1, and when I click on it I want it to bring me to Panel 1a(which is not in the TabPanel), so how should I go about doing it? I tried setActiveItem but it keeps saying setActiveItem undefined. :-/
Here's my code,

this is my 'Panel 1'


var Appsmenu=new Ext.Panel({
layout:'card',
id:'appsmenu',
fullscreen:true,
dockedItems:[
{
xtype:'toolbar',
title:'Apps',

},
{
xtype:'button',
ui:'round',
text:'Guess a Country',
handler:function(){
//Switch to CountryGame Panel
}

}
],


})


And this is my Panel 1a which I want to switch over to



var CountryGame=new Ext.Panel({
layout:'card',
id:'countrygame',
fullscreen:true,
cls:'countrygame',

dockedItems:[
{
xtype:"toolbar",
title:" Guess the Country!",
items:[
new Ext.Button({
ui:'back',
text:'Back',
handler:function(){
//Want to go back to Panel 1
}


}),
{
xtype:'spacer'
},
new Ext.Button({
ui:'action',
text:'How to Play',
handler:function(){
var Panel=new Ext.Panel({
floating:true,
collapsible:true,
height:320,
width:240,
modal:true,
centered:true,
styleHtmlContent:true,
scroll:'vertical',
html:"Guess the Country Game!<br />How to Play?<br />Just guess a country in the box! Hints will be provided:D",
dockedItems:[
{
xtype:'toolbar',
dock:'bottom',
layout:{
type:'vbox',
pack:'center',
align:'stretched',
},
items:[
new Ext.Button({
text:'Close',
ui:'decline',
onPress:function(){Panel.hide('fade')},
})
]
}
]

})
Panel.show('pop')
}
})
]
}
],
html:'<body onKeyPress=catchKeyCode()><br /><br /><p class=header align=center>Country Guesser: Guess the Country!</p><br /><form name=form1><table class=tab cellpadding=3 cellspacing=2 align=center><tr><td class=td1><input type=text size=25 name=hint value="Enter your guess below and click on Guess!" readonly class=txt1></td></tr><tr><td class=td1><input type=text name=guess1 size=25 class=txt2 value="Guess here!"></td></tr><tr><td class=td1><input type=text name=triescounter size=10 value="Tries:"></tr></td><tr><td class=td1><input type=button align=right value=Guess! onClick=guessit() class=btn title="Click here to get a hint or check your guess.">&nbsp;&nbsp;&nbsp;<input type=button value=Clear onClick=clearBox() class=btn title="Click here to clear the text box.">&nbsp;&nbsp;&nbsp;<input type=button value=New onClick=newGame() class=btn title="Click here to start a new game."></td></tr></table></form></body>'

})


Pls help. Thanks in advance!