load xtemplate in a panel on a click

[fongus]

hello,

i'm new to use EXT and may be it's a simple problem but i test many things and nothing happened.
like the title said, i have a problem to load a template in a panel by cliking on a tree node,
I just want to load my template in the center div.
first i have tree with node in my west div.
I use something like that to call my panel but nothing happened.

I load everything on the first load
"center" is my var for center panel in a viewport.
tree.js


Tree_Category.on('click',function(node,event){

//udate center title
var tab=node.id.split(".")
var typeElt=tab[0];
var numElt=tab[1];
center.setTitle(typeElt+" : "+node.text);
if(typeElt=="dossier"){
//I try this but it don't work
projectViewDataRecord.load({params:{"typeElt":typeElt,"numElt":numElt}});
center.add(projectView);
center.doLayout();


}else if(typeElt=="fichier"){
...
}

with that code nothing happened,
i try to use dataView to load my content but nothing happened to.
projectview.js


var projectViewDataDisplay = new Ext.DataView({
store: projectViewDataRecord,
tpl: tplProjectView,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.divProjet'

})


var projetView = new Ext.Panel({
id:'ProjetView',
items:[projectViewDataDisplay],
tbar:tbarProjectView


});
the toolbar is loaded but not the template.
someone have an idea.

[Condor]

You are adding projetView to center EVERY time you click on a node!

Instead, make your center panel layout:'card' and put all possible panels in the items.

Now you only have to select the matching card when you click on a node.

[fongus]

ok I tried what you said like this,

first i change the layout in my center panel like this,
doc.js



var center = new Ext.Panel(
{
region: 'center',
layout:'card',
id:'center',
el:'center-div',
title: 'Dossier',
headerAsText:true,
autoDestroy:true

}
);
then when i click on my treenode i add directly my dataview to the center panel.
tree.js


if(typeElt=="dossier"){
//projectViewDataRecord.load({params:{"typeElt":typeElt,"numElt":numElt}});
center.add(projectViewDataDisplay);
center.add(tbarProjectView);
center.doLayout();

obviously nothing is displayed.
here is the declaration of projectViewDataDisplay
projectview.js


//json store
var projectViewDataRecord = new Ext.data.JsonStore({
url:"../../include/php/getElement.php",
root:"dataProjet",

fields:[
{name:"numProjetTest",type:"int"},
{name:"nomProjetTest",type:"string"},
{name:"commentaireProjetTest",type:"string"},
{name:"numUrgenceProjetTest",type:"int"},
{name:"numEtatProjetTest",type:"int"},
{name:"numProjetTestParent",type:"int"},
{name:"dateProjet",type:"date"}
]
});

//template
var tplProjectView = new Ext.XTemplate(
"<div id='divProjet'" +
"<p><b>{nomProjetTest}</b></p>" +
"<p><b>{commentaireProjetTest}</b></p>" +
"</div>"
);

//dataview
var projectViewDataDisplay = new Ext.DataView({
store: projectViewDataRecord,
tpl: tplProjectView,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.divProjet'

});



with what you said can you give me an example because actually i'm really lost.
thanks in advance for your help

[Condor]

I meant:

var center = new Ext.Panel({
region: 'center',
layout:'card',
id:'center',
el:'center-div',
title: 'Dossier',
headerAsText:true,
items: [projectViewDataDisplay, ...]
);
...
if(typeElt=="dossier"){
center.layout.setActiveItem(projectViewDataDisplay);
center.doLayout();

[fongus]

ok, just one more ask,

is there any solution to use add and remove items with my case ? because if i have many panel to manage it seems to be very difficult to manage it. :-/
loaded from other link like an other toolbar

[Condor]

Yes, you can add and remove components to/from a container (you already seem to know that you need to call doLayout after adding a component).

But remember that the container layout can sometimes be restrictive. You are probably using layout:'fit', which only supports ONE item, so you have to remove the previous panel before you can show a new one.
Also note that there are other layouts (like border) that don't support adding or removing items.

[fongus]

for example

[Condor]

Maybe you should start with exactly describing what you want to do...

[fongus]

:((
ok,

I change my center panel like this


var center = new Ext.Panel(
{
region: 'center',
layout:'card',
id:'center',
el:'center-div',
title: 'Dossier',
autoDestroy:true

}
I change my click tree node like this.


Tree_Category.on('click',function(node,event){

var tab=node.id.split(".")
var typeElt=tab[0];
var numElt=tab[1];
if(typeElt=="dossier"){
center.removeAll();
center.add(projetView);
center.doLayout();



}
ok tried what you said
nothing is diplayed,
i think the problem may comes from my var typeElt and numElt, because it's my paramaters to my dataview and i need to load these paramaters to display the different result, however nothing is load in my firebug when i click on a node.

how can i load correctly these params to my dataview or my datastore. and display it to my center panel.

[Condor]

I don't see you loading the store anywhere.

[fongus]

I tried here, have have the good response


Tree_Category.on('click',function(node,event){

var tab=node.id.split(".")
var typeElt=tab[0];
var numElt=tab[1];
if(typeEl=="dossier"){
center.removeAll();
projectViewDataRecord.load({params:{typeElt:typeEl,numElt:numEl},
callback: function(r,options,success) {

//that does'nt work
//center.add(projetView);
//center.doLayout();

}

})
}
I'm sure that i have to use the callback to display the different things but how ???
i'm blocked

[fongus]

when i use the callback function
success parameter return everytimes false.
evenif my Json is good.

anyone have an idea.

here is an example of my json.


[{"numProjetTest":"35","nomProjetTest":"NFF-nestle","commentaireProjetTest":"&amp;lt;p&amp;gt;test concernant nestle&amp;lt;\/p&amp;gt;","numUrgenceProjetTest":"0","numEtatProjetTest":"0","numProjetTestParent":"0","dateProjet":"2009-07-07 09:26:44"}]

[Condor]

Is this really the server response (did you copy it from Firebug or Fiddler)?
Is your server replying with HTTP status code 200?

[fongus]

sorry i can't do a printer screen.

here is my firebug result,
the http status look like 200.


POST http://10.1.101.144/PTest2/include/php/getElement.php
POST http://10.1.101.144/PTest2/include/php/getElement.php
200 OK
ext-base.js (ligne 9)

Response Requête

[{"numProjetTest":"35","nomProjetTest":"NFF-nestle","commentaireProjetTest":"&amp;lt;p&amp;gt;test concernant nestle&amp;lt;\/p&amp;gt;","numUrgenceProjetTest":"0","numEtatProjetTest":"0","numProjetTestParent":"0","dateProjet":"2009-07-07 09:26:44"}]

[fongus]

re i tried to send my json without the []
but the success in the callback function is always false.



{"numProjetTest":"29","nomProjetTest":"itanium","commentaireProjetTest":"&amp;lt;p&amp;gt;projet sur les serveurs itaniums&amp;lt;\/p&amp;gt;\n&amp;lt;p&amp;gt;&amp;amp;nbsp;&amp;lt;\/p&amp;gt;","numUrgenceProjetTest":"0","numEtatProjetTest":"0","numProjetTestParent":"0","dateProjet":"2009-07-07 09:15:39"}


anyone have an idea may be what i have retuned in the json.
please :((

[fongus]

when i launch firebug with the option : breack on each error
in ext-all-debug.js
on line 11936
firebug said
var root = this.getRoot(o), c = root.length, totalRecords = c, success = true; root is undefined

why ?

[fongus]

[Resolved]

ok I found another solution with ajax.request.
here is it.

in my center panel.


var center = new Ext.Panel(
{
region: 'center',
layout:'card',
id:'center',
el:'center-div',
title: 'Dossier',
autoDestroy:true,
items:[projetView]


}
);
in my tree onclick function


Tree_Category.on('click',function(node,event){
var tab=node.id.split(".")
var typeEl=tab[0];
var numEl=tab[1];
center.setTitle(typeEl+" : "+node.text);
if(typeEl=="dossier"){
Ext.Ajax.request({
url: '../../include/php/getElement.php',
success: function(result,option){
res = new Ext.util.JSON.decode(result.responseText);
center.layout.setActiveItem(projetView);
tplProjectView.overwrite(projetView.body,res);
center.doLayout();
},
failure: function(result,option){
print_r(result)
}

,
params: { typeElt:typeEl,numElt:numEl }
});
I thinck there is bug (or i don't understand how works dataview) in the dataview load.
because I don't find any solution to pass my data.

[fongus]

thanks for your help