Change content if user clicks on a tree item

[maxritti]

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]
},
contentPanel
],
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.

[scottmartin]

Have a look at the main layout-browser example as it does this.
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout-browser/layout-browser.html

Regards,
Scott.

[maxritti]

Okay i will try understanding this example.

[maxritti]

Hi,

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?

Thx

[scottmartin]

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?

Regards,
Scott.

[maxritti]

I believe that it comes from the grid.
Please have a look to this example.

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/paging.html

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.

33733

[maxritti]

No one any idea why the "Loading..." mask is displayed at first time?

[scottmartin]

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.

Regards,
Scott.

[maxritti]

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.
34068

[scottmartin]

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.

Regards,
Scott.