Tree element click = new data in grid

[noso]

I can't seem to find a good explanation how to make my problem work out fine.
When I click a tree item with a certain id, I want to load specific data in my grid (ASYNC with AJAX). How is this possible? :-?

[Animal]

Add a click handler to the tree node which calls your method that loads the grid.

[BernardChhun]

here's some basic steps to achieve what you want.

1. add an onClick listener on the TreePanel

2. Make sure that listener is able to catch what node you clicked on. Save the id and pass that value to your grid's dataStore's baseParams property before you load the data.


yourTree.on("click", function(q,w,e) {
// I don't remember by hearts what are the arguments that are given to your listener so test it out
console.log(q,w,e);
// there should be a node item in there :)

var selectedId = node.attributes.id;

yourDataStore.baseParams["selectedId"] = selectedId;
yourDataStore.load();
}, this, true);

this code ain't flawless and you'll have to iron it out a bit but that is the main steps in making your thing work

[noso]

Ok thanks, but I need an example for the grid component.
At the moment I have a function like this :



var Grid = function() {

return {
changeDataSource: function(tablename, gridtype) {
alert(tablename +" "+ gridtype);
this.dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'/grid_handler/getData/'+tablename+'/'+gridtype+'/2'}),
reader: new Ext.data.ArrayReader
(
{id:1},
[
<?php
foreach($griddata['desc'] as $key => $desc){
[COLUMN DESCRIPTION]
}?>
]
)
});
this.dataStore.load();
this.dataStore.on("load", function(){ alert('test');
grid.reconfigure(this.dataStore, this.colModel);

} , this, true);
}

[ ... etc ... ]

[noso]

Here is what the Tree does :


myFormTree.on( 'click'
, function(n){
Grid.changeDataSource('form_handlers_fields_checkbox', 'property');
}
, myFormTree);

[noso]

I guess it is a wrong structure? :s