PDA

View Full Version : Lazily Initialising a card layout



sean.mcelroy
9 Oct 2012, 1:41 PM
Hello I'm trying to lazy initialise a card layout but it's just not working. I'm copied my code below can someone tell me what I'm doing wrong.




var panel1 = Ext.create('Ext.panel.Panel', {
html: 'Card 1',
alias: 'widget.panel1',
listeners: {
render: function() {
alert('Card 1.');
}
}
});


var panel2 = Ext.create('Ext.panel.Panel', {
html: 'Card 2',
alias: 'widget.panel2',
listeners: {
render: function() {
alert('Card 2.');
}
}


});
var panel3 = Ext.create('Ext.panel.Panel', {
html: 'Card 3',
alias: 'widget.panel3',
listeners: {
render: function() {
alert('Card 3.');
}
}
});


Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'west',
items: [
{
xtype:"button",
text:"Show Card1",
width: 100,
listeners: {
click : function() {
Ext.getCmp('cardPanel').getLayout().setActiveItem(0);
}
}
},
{
xtype:"button",
text:"Show Card2",
width: 100,
listeners: {
click : function() {
Ext.getCmp('cardPanel').getLayout().setActiveItem(1);
}
}
},
{
xtype:"button",
text:"Show Card3",
width: 100,
listeners: {
click : function() {
Ext.getCmp('cardPanel').getLayout().setActiveItem(2);
}
}
}
],
width: 100
},
{
id: 'cardPanel',
region: 'center',
xtype:'panel',
layout: 'card',
items: [
panel1,
panel2,
panel3
]
}
]
});
}
});

mitchellsimoens
15 Oct 2012, 5:41 AM
Instead of using Ext.create (which you shouldn't do before the launch method of Ext.application fires) you should specify config objects in the cardPanel panel.