Not change item after TreePanel click

Hello everybody!

I want to create a user interface with extjs 3.4 in which a user will click on one tree option and a new form will appear in cetral region.



This is my Viewport:



var container=new Ext.Viewport({

layout: 'border', renderTo: Ext.getBody(),

items: [westPanel, centerPanel ]

});


This is my centerPanel definition: centerPanel={ region: 'center', layout: 'card', id:'consoleContainer', margins: '35 5 5 0', border: false, autoScroll: true,

items: [

{id:'form1'}

]

};


This is my westPanel definition:

westPanel={

region: 'west', id:'west-panel', title: 'Navigation', margins: '35 0 5 5', cmargins: '35 5 5 5', collapsible: true, split: true, width: 200, minSize: 175, maxSize: 400,

xtype: 'treepanel', activeItem: 0, rootVisible: false, autoScroll: true, loader: new Ext.tree.TreeLoader(), root: new Ext.tree.AsyncTreeNode({

expanded: true,

children: [

{id:'option1', text: "Option 1", leaf: true}),

listeners: {

click: function(n) {

if (n.id === 'option1') {

Ext.Msg.alert('Tree Click', 'You clicked: "' + n.attributes.text + '"');

Ext.getCmp('consoleContainer').layout.setActiveItem('form1');}}}};



This is my form1 definition: var form1= new Ext.form.FormPanel({

frame: true,

title: 'Form 1',

width: 675,

defaults: {width: 230},

defaultType: 'textfield',

id:'form1',

items: [

{fieldLabel: 'Username', name: 'username', id: 'username', allowBlank: false },

{fieldLabel: 'Password', name: 'password', inputType: 'password', allowBlank: false }

]

});



The problem is even through i used Ext.getCmp('consoleContainer').layout.setActiveItem('form1');
nothing happen and in central region is only a white page without errors.



Please help me!