How to do this (with tabs)

[v.zen]

Hi,

my goal is to do this panel layout:

| tab1 | tab2 | tab3 | ... | tab n |
+-------------------------------------+
|   a tree  |   leaf detail           |
|   panel   |                         |
| different |                         |
| tree for  |                         |
| different |                         |
| tab id    |                         |
+-------------------------------------+

the tree nodes are loaded from json (no problem for this).
My question is: what is the best pratices to do this layout?

Thanks in advance.
v

[jay@moduscreate.com]

tabPanel,
items has a panel with a border layout,
tree panel in east
details panel in center.

[v.zen]

Ok. But how to wrap tree json id with tab ?

Here my code

var App = function () { 
var tree = new Ext.tree.TreePanel({
    region: 'west',
    width: 200,
    animate: true,
    enableDD: false,
    loader: new Ext.tree.TreeLoader({dataUrl:'strutturaJson'}),
    });;
var detail = new Ext.Panel ({
region: 'center',
title: 'Dettagli'
});
var main = new Ext.Panel ({
items: [
tree,
detail
],
height: 350,
layout: 'border'
});
var tabPanel = new Ext.TabPanel ({
resizeTabs: true,
minTabWidth: 100,
tabWidth: 150,
activeTab: 0,
enableTabScroll: true,
defaults: { autoScroll: true },
title: 'Riepilogo dal ',
deferredRender: false,
border: true,
plain: true,
margins: '5 5 5 5',
autoScroll: true,
items: [
{ title: 'Master universitario',
body: main },
{ title: 'Master',
body: main },
{ title: 'Corso di Specializzazione',
body: main }
],
scripts: true
});
return {
 init: function () { 
  tabPanel.render('tabPanel');
 } 

}}();

Ext.onReady(App.init, App);

[jay@moduscreate.com]

I'm not too sure what you're asking.

[v.zen]

I not undestand how to binding tab id with tree. Every tabs act like a filter.
So click to tab1 render tree from json with param id=1, click to tab2 render tree from json with param id=2 ...and so on.
I suppose that my problem is like this: Referred to http://examples.extjs.eu/gridintab.html thinks another tab which load the same grid of tab2 but with some select filter.

I have these database structure:

table 1
course 1
course 2
course n

table 2
tree of course 1
tree of course 2
tree of course n

I want a tab panel with course 1,..n. When I active tab of course x is displayed tree of course x.

Any ideas?

Thanks in advance
v.

[jay@moduscreate.com]

setup an 'activate' listener for the panels that you need to monitor clicks for.

[v.zen]

Interesting. Draw tap panel, panel, tree, adn so on. And after popolate when events on tabs are fired?

Thanks!
v.

[v.zen]

I'm looking for a working example. Here my code.
My questions is: how to set the url of tab, like autoLoad do?

new Ext.TabPanel ({
resizeTabs: true,
enableTabScroll: true,
defaults: { autoScroll: true },
id: 'tabPanel',
title: 'Riepilogo dal 2008-08-01 al 2008-08-31 24:59',
deferredRender: false,
border: true,
plain: true,
items: [
{ title: 'Ambienti',
id: 'tipoRisorsaId=1&dal=2008-08-01&al=2008-08-31 24:59' },
{ title: 'Strumenti',
id: 'tipoRisorsaId=2&dal=2008-08-01&al=2008-08-31 24:59' }
],
listeners: {tabchange: function(tp,newTab){
        newTab.setUrl('fe_dev.php/gantt/HTML');
   }}
})
]
}); }

[mjlecomte]

You should read this:
http://extjs.com/learn/Ext_Forum_Help

[jay@moduscreate.com]

Michael,

Ext is global in nature. Many folks simply don't know english that well - so they post simple 'how to?'.

JS is like the universal language here