View Full Version : Change content if user clicks on a tree item

3 Apr 2012, 9:06 AM
Hi @all,

long time ago i started my experience in ext js. I spend no much time for that in the past.

But today i'm very happy that i wrote my first layout which works fine. :)
In Region west there is a Treepanel with some items and another part for some information.

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "First entry", expanded: false,
children: [
{ text: "Child 1", leaf: true},
{ text: "Child 2", leaf: true},
{ text: "Child 3", leaf: true}
{ text: "Second one", expanded: false,
children: [
{ text: "A", leaf: true},
{ text: "B", leaf: true}
{ text: "Last one", expanded: false,
children: [
{ text: "111", leaf: true},
{ text: "222", leaf: true},

var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Navigation',
region: 'west',
split: true,
height: 360,
minSize: 150,
store: store,
rootVisible: false,
autoScroll: true

Ext.create('Ext.Viewport', {
layout: 'border',
title: 'FirstProject',
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<h1>MyProject</h1>',
height: 30
}, {
layout: 'border',
id: 'layout-browser',
region: 'west',
border: false,
split: true,
margins: '2 0 5 5',
width: 200,
minSize: 10,
maxSize: 200,
items: [treePanel, detailsPanel]
renderTo: Ext.getBody()

Now i would like to change the content in center panel if i click on some entries from my treepanel.
But i don't know and i don't find any solution in the examples. :-/

I hope that somebody could help some new extjs user.

3 Apr 2012, 9:33 AM
Have a look at the main layout-browser example as it does this.


3 Apr 2012, 10:46 AM
Okay i will try understanding this example.

6 Apr 2012, 11:00 AM

i spend many hours in this example and i think that i understand this.
But i'm little bit confused. My application use in resign west a tree panel for the navigation. After user clicks on one entry in the navigation in region center i display a grid with information from local installed mysql server.
But when i load my page i can see a "Loading..." in upper left corner. I thin that comes because my app loads the grid during first access. And after clicking on the nav-item the grid is display in region center. Is this correct?

Can this changed in some way or is this the way to use this?


6 Apr 2012, 11:47 AM
Is the loading from a mask that you are setting, or from the grid?
When you say the left corner .. do you mean the left corner of the center region or the viewport?


7 Apr 2012, 3:41 AM
I believe that it comes from the grid.
Please have a look to this example.


In the middle of the grid the "Loading..." Mask will be displayed. And it looks like in my app.

My application shows it after the first navigation to the page. And i can see it in the left upper corner of the viewport.


15 Apr 2012, 5:08 AM
No one any idea why the "Loading..." mask is displayed at first time?

15 Apr 2012, 7:41 AM
In looking at your screen, it is possible you have some bad CSS.
If you remove the 'My First Application' header from your app .. does it help? There is not reason for this to display in such an odd place unless you have a CSS/div problem.


15 Apr 2012, 10:50 PM
I removed the 'north' region and the link to my css.
But it doesn't work.

Loading mask is displayed in left upper coner after loading the page.

16 Apr 2012, 5:41 AM
Try removing the code: renderTo: Ext.getBody() in your viewPort. This is not needed on Viewport and it defaults to the client body. If this does not help, then please create a small working example of your problem so we can take a look.