View Full Version : Not change item after TreePanel click

16 Mar 2014, 9:45 AM
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: [

This is my westPanel definition:
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 + '"');

This is my form1 definition: var form1= new Ext.form.FormPanel({
frame: true,
title: 'Form 1',
width: 675,
defaults: {width: 230},
defaultType: 'textfield',
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!

16 Mar 2014, 11:10 AM
I changed the var form1= new Ext.form.FormPanel() to var form1= {xtype: 'form'..} and it works... what the different?