PDA

View Full Version : ExtJS:making ajax calls to SpringMVC in Tree structure to get the child nodes.



maali
1 Apr 2012, 9:42 AM
I need to make two requests to SpringMVC to populate the tree structure in ExtJS tree panel.The first call will return me JSON of only folders,in the second call i have to pass the 'path' variable of a particular folder to retrieve the list of files.I am able to make the first call and prepare a tree structure with JSON obtained from SpringMVC.How do i pass the path variable as second request to SpringMVC and get the list of files. Here is my .js code,


Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);



Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [

{name: 'name', type: 'string'}

]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
//the store will get the content from the .json file
url: 'treegrid.json'


},
folderSort: true
});


var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,

columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'name'
}]
});


and my json is



{
"name": "Root",
"title": "Root",
"path": "/root",
"children": [
{
"name": "Folder1",
"title": "Folder1",
"path": "/root/Folder1",
"children": [
{
"name": "Folder12",
"title": "Folder12",
"path": "/root/Folder1/Folder12",
"children": [
{
"name": "Folder121",
"title": "Folder121",
"path": "/root/Folder1/Folder121",
"children": []
},
]
}
]
}
]
}





I need to make two requests to SpringMVC to populate the tree structure in ExtJS tree panel.The first call will return me JSON of only folders,in the second call i have to pass the 'path' variable of a particular folder to retrieve the list of files.I am able to make the first call and prepare a tree structure with JSON obtained from SpringMVC.How do i pass the path variable as second request to SpringMVC and get the list of files. Here is my .js code,

Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);



Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [

{name: 'name', type: 'string'}

]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
//the store will get the content from the .json file
url: 'treegrid.json'


},
folderSort: true
});


var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,

columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'name'
}]
});
and the json is,

{
"name": "Root",
"title": "Root",
"path": "/root",
"children": [
{
"name": "Folder1",
"title": "Folder1",
"path": "/root/Folder1",
"children": [
{
"name": "Folder12",
"title": "Folder12",
"path": "/root/Folder1/Folder12",
"children": [
{
"name": "Folder121",
"title": "Folder121",
"path": "/root/Folder1/Folder121",
"children": []
},
]
}
]
}
]
}
How do i take the value of "path" when user clicks on folder and pass it to springMVC to get the list of files and populate on a panel.Please help

vietits
1 Apr 2012, 4:02 PM
You should listen to the beforeload event of the store and then setting added parameters there. Ex


// store defining/creating
....
listeners: {
beforeload: function(store, operation){
var node = operation.node;
operation.params = Ext.apply(operation.params || {}, {
path: node.get('path')
})
}
}