maali
3 Apr 2012, 11:13 PM
I am making two ajax calls to populate a tree structure,one call for folder and other for files.The folder call is working perfect.Upon click of any folder i need to make another ajax call by passing the path parameter,i am able to pass and get the response from server.But in the grid ,the values are not getting populated.
Can anyone help on this urgently.
Here is my code.
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);
//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'path', type: 'string'}
],
proxy: {
type : 'ajax',
url : 'folder.htm',
reader : new Ext.data.JsonReader({
root : 'children'
})
}
});
var store = Ext.create('Ext.data.TreeStore', {
model : 'Task',
folderSort: true
});
store.load();
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var treePanel = Ext.create('Ext.tree.Panel', {
title: 'Treepanel',
id:'treePanel',
width: 300,
height: 500,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Folders',
flex: 2,
sortable: true,
dataIndex: 'name'
//dataIndex: 'name'
}],
listeners: {
itemclick: {
fn: function(view, record, item, index, event) {
path = record.data.path;
console.log("path" + ' ' + path);
if(path != null && path.length > 1)
callGridSearchResults(path);
}
}
}
});
callGridSearchResults = function(path){
// alert("path" + path)
Ext.define('Search', {
extend : 'Ext.data.Model',
fields : [
{name: 'id', type: 'string'},
{name:'filename', mapping:'filename'},
],
proxy : {
type : 'ajax',
url: 'files.htm',
timeout: 120000,
noCache: false,
extraParams : {
searchitem: path
},
reader : Ext.create('Ext.data.JsonReader',{
root : 'results'
})
}
});
var searchdetails = Ext.create('Ext.data.Store', {
model : 'Search'
//autoLoad: true,
});
searchdetails.load();
Ext.define('Gridpanel',{
extend:'Ext.grid.Panel',
alias : 'widget.Gridpanel',
id:'Gridpanel',
xtype:'grid',
title: 'Files List',
store:searchdetails,
//headerPosition:'left',
frame:true,
width:600,
height:400,
columns: [
{ header: 'Filename', dataIndex: 'filename',width: 150},
{ header: 'ID', dataIndex: 'id',width: 150},
],
bbar: new Ext.PagingToolbar({
pageSize: 2,
store:searchdetails,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}'
})
});
};
Can anyone help on this urgently.
Here is my code.
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);
//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'path', type: 'string'}
],
proxy: {
type : 'ajax',
url : 'folder.htm',
reader : new Ext.data.JsonReader({
root : 'children'
})
}
});
var store = Ext.create('Ext.data.TreeStore', {
model : 'Task',
folderSort: true
});
store.load();
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var treePanel = Ext.create('Ext.tree.Panel', {
title: 'Treepanel',
id:'treePanel',
width: 300,
height: 500,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Folders',
flex: 2,
sortable: true,
dataIndex: 'name'
//dataIndex: 'name'
}],
listeners: {
itemclick: {
fn: function(view, record, item, index, event) {
path = record.data.path;
console.log("path" + ' ' + path);
if(path != null && path.length > 1)
callGridSearchResults(path);
}
}
}
});
callGridSearchResults = function(path){
// alert("path" + path)
Ext.define('Search', {
extend : 'Ext.data.Model',
fields : [
{name: 'id', type: 'string'},
{name:'filename', mapping:'filename'},
],
proxy : {
type : 'ajax',
url: 'files.htm',
timeout: 120000,
noCache: false,
extraParams : {
searchitem: path
},
reader : Ext.create('Ext.data.JsonReader',{
root : 'results'
})
}
});
var searchdetails = Ext.create('Ext.data.Store', {
model : 'Search'
//autoLoad: true,
});
searchdetails.load();
Ext.define('Gridpanel',{
extend:'Ext.grid.Panel',
alias : 'widget.Gridpanel',
id:'Gridpanel',
xtype:'grid',
title: 'Files List',
store:searchdetails,
//headerPosition:'left',
frame:true,
width:600,
height:400,
columns: [
{ header: 'Filename', dataIndex: 'filename',width: 150},
{ header: 'ID', dataIndex: 'id',width: 150},
],
bbar: new Ext.PagingToolbar({
pageSize: 2,
store:searchdetails,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}'
})
});
};