PDA

View Full Version : How to load data for TreeGrid locally?



clarkeligong
2 Mar 2011, 7:43 AM
hi, is that possible to load data for TreeGrid locally? I checked almost all examples about TreeGrid, which requests data always through dataUrl. What I'm trying to do is to generate the JSON data for TreeGrid on my own, then pass it to TreeGrid directly, WITHOUT sending a request.

It seems that the processDirectResponse of TreeLoader might be useful to achieve this goal, but I'm not family with the parameters, can anybody help me out?

Any tips and suggestion is appreciated!

Condor
2 Mar 2011, 7:53 AM
Configure the TreeLoader with preloadChildren:true and have your 'root' contain a 'children' array of nodes.

clarkeligong
2 Mar 2011, 11:25 PM
It seems the preloadChild property only works to load all nodes at once. Can following codes work?

var tree = new Ext.ux.tree.TreeGrid({

columns:[{header: 'task',dataIndex: 'task',width: 230},


{header: 'duration',dataIndex: 'duration',width: 230}]

root: [{name:'a',iconCls:'task-folder',expanded: true,children:[


{name:'child of a',iconCls:'task',leaf:true},


{name:'another child of a',iconCls:'task',leaf:true}]

]}]
});


or can anybody give a little detailed code for doing this? Thanks a lot

Condor
3 Mar 2011, 12:24 AM
It does if you configure the loader with clearOnLoad:false.

clarkeligong
3 Mar 2011, 5:22 AM
but I got problem by running following code: :(:((

var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
region : 'center',
enableDD: true,

columns:[{
header: 'Task',
dataIndex: 'task',
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration'
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],
root: {
nodeType: 'async',
attributes : [{task:'Project1',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child1',duration:1.25,user:'Tommy Maintz',leaf:true},{task:'child2',duration:1.25,user:'Tommy Maintz',leaf:true}]},{task:'Project2',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child21',duration:1.25,user:'Tommy Maintz',children:[{task:'child211',duration:1.25,user:'Tommy Maintz',leaf:true}]}]}]
},
loader: new Ext.ux.tree.TreeGridLoader({
clearOnLoad : true
,preloadChilren: true
})
});

fay
3 Mar 2011, 5:35 AM
You've mis-spelt Children:



preloadChilren: true

clarkeligong
3 Mar 2011, 5:58 AM
ok, I got it works finally with following configuration, but still not perfect as an additional root node lies on the top of all (see the detached image), why?

var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
region : 'center',
enableDD: true,

columns:[{
header: 'Task',
dataIndex: 'task',
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration'
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],
root: {
nodeType: 'async',
attributes : [],
children:[{task:'Project1',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child1',duration:1.25,user:'Tommy Maintz',leaf:true},{task:'child2',duration:1.25,user:'Tommy Maintz',leaf:true}]},{task:'Project2',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child21',duration:1.25,user:'Tommy Maintz',children:[{task:'child211',duration:1.25,user:'Tommy Maintz',leaf:true}]}]}]
},
loader: new Ext.ux.tree.TreeGridLoader({
clearOnLoad : true
,preloadChildren: true
})
});

24956

clarkeligong
3 Mar 2011, 6:06 AM
Ok, with following code I got a satisfied result :), thanks for tipps!

var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
region : 'center',
enableDD: true,

columns:[{
header: 'Task',
dataIndex: 'task',
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration'
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],
root: {
nodeType: 'async',
task: 'root',
duration:111,
user:'thomas mueller',
expanded:true,
attributes : [],
children:[{task:'Project1',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child1',duration:1.25,user:'Tommy Maintz',leaf:true},{task:'child2',duration:1.25,user:'Tommy Maintz',leaf:true}]},{task:'Project2',duration:13.25,user:'Tommy Maintz',expanded: true,children:[{task:'child21',duration:1.25,user:'Tommy Maintz',children:[{task:'child211',duration:1.25,user:'Tommy Maintz',leaf:true}]}]}]
},
rootVisible:true,
loader: new Ext.ux.tree.TreeGridLoader({
clearOnLoad : true
,preloadChildren: true
})
});

amanind
12 Apr 2011, 12:11 AM
Hey can anyone help me on Ext.ux.tree.TreeGrid

In my code data is no loading in grid :(

here is my JS code


MS.ImpactSisterApp.FinancialProjectionsPanel = Ext.extend(Ext.Panel, {
store: null,
grid2:null,
initComponent: function() {
debugger
Ext.QuickTips.init();
this.store = new Ext.data.Store({
data:[],
reader: new Ext.data.JsonReader({
fields: [
{ name: 'id', mapping: 'id', type: 'int' },
{ name: 'name', mapping: 'name' },
{ name: 'Sync', mapping: 'Sync', type: 'date' },
{ name: 'validate', mapping: 'validate' },
{ name: 'version', mapping: 'version' },
{ name: 'model_status', mapping: 'model_status' },
{ name: 'ev_status', mapping: 'ev_status' },
{ name: 'val_comm', mapping: 'val_comm' },
{ name: 'updated_by', mapping: 'updated_by' },
{ name: 'updated_on', mapping: 'updated_on', type: 'date' }]
})
});
grid2 = new Ext.ux.tree.TreeGrid({
enableDD: true,
id : 'grid1',
store: this.store,
master_column_id : 'name',
columns: [
{ header: 'Id', dataIndex: 'id', hidden:true },
{ header: 'Fund/Region/Investment/Model', id: 'name', dataIndex: 'name', width: 250, minWidth: 250 },
{ header: 'Sync Status', dataIndex: 'Sync', width: 100, minWidth: 100 },
{ header: 'Validation', dataIndex: 'validate', width: 100, minWidth: 100 },
{ header: 'Version', dataIndex: 'version', width: 100, minWidth: 100 },
{ header: 'Model Status', dataIndex: 'model_status', width: 200, minWidth: 200, align: 'center' },
{ header: 'EV Carry Value Status', dataIndex: 'ev_status', width: 200, minWidth: 200, align: 'center' },
{ header: 'Val Comm Control', dataIndex: 'val_comm',width: 200, minWidth: 200, align: 'center' },
{ header: 'Last Updated By', dataIndex: 'updated_by', width: 100, minWidth: 100 },
{ header: 'Last Updated On', dataIndex: 'updated_on', width: 100, minWidth: 100 }
],
stripeRows: true,
iconCls:'icon-grid',
height: 510,
frame:true,
rootVisible:true,
loader: new Ext.ux.tree.TreeGridLoader({
clearOnLoad : true
,preloadChildren: true
})
/*,
plugins: [
new Ext.ux.grid.ColumnHeaderGroup({
rows: [
[{
colspan:5
},
{
header: 'Asset Management Review',
align: 'center'
},
{
header: 'Investment Control Review',
align: 'center'
},
{
header: 'GPG',
align: 'center'
},{
colspan:2
}]
]
})
]*/
});

var config = {
frame: true,
timeout: 60000,
hideBorders: true,
header: false,
layout: 'table',
title: "Workflow dashboard",
items:[ grid2 ],
closable: true
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
MS.ImpactSisterApp.FinancialProjectionsPanel.superclass.initComponent.apply(this, arguments);
//debugger
this.store.loadData(this.FundDetails);
//this.refreshInvestmentAssetModelsPanel(this);
},
refreshInvestmentAssetModelsPanel: function() {
try{
this.store.removeAll();
}catch(ex){
}
this.store.loadData(this.FundDetails);
},
onDestroy: function() {

}
});


here is my JSON



{success:true, data: {FundDetails:[{
id : 99999,
name : 'Collapse All/Expand All',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
leaf : true,
updated_on : ''
},
{
name:'MSREF I',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by:'',
updated_on : '',
iconCls:'task-folder',
expanded: true,
children:[{
name : 'America',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by:'',
updated_on : '',
iconCls:'task-folder',
children:[{
name : 'Investment1',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
iconCls:'task-folder',
children:[{
name : 'Model1',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model2',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model3',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model4',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf: true,
iconCls: 'task'
}]
},{
name : 'Investment2',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf:true,
iconCls:'task'
},{
name : 'Investment3',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf:true,
iconCls:'task'
},{
name : 'Investment4',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf: true,
iconCls: 'task'
}]
}, {
name : 'Asia',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by:'',
updated_on : '',
iconCls:'task-folder',
children:[{
name : 'Investment1',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
iconCls:'task-folder',
children:[{
name : 'Model1',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model2',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model3',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model4',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf: true,
iconCls: 'task'
}]
},{
name : 'Investment2',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf:true,
iconCls:'task'
},{
name : 'Investment3',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf:true,
iconCls:'task'
},{
name : 'Investment4',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf: true,
iconCls: 'task'
}]
}]
},{
name:'MSREF II',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by:'',
updated_on : '',
iconCls:'task-folder',
expanded: true,
children:[{
name : 'America',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by:'',
updated_on : '',
iconCls:'task-folder',
children:[{
name : 'Investment1',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
iconCls:'task-folder',
children:[{
name : 'Model1',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model2',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model3',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model4',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf: true,
iconCls: 'task'
}]
},{
name : 'Investment2',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf:true,
iconCls:'task'
},{
name : 'Investment3',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf:true,
iconCls:'task'
},{
name : 'Investment4',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf: true,
iconCls: 'task'
}]
}, {
name : 'Asia',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by:'',
updated_on : '',
iconCls:'task-folder',
children:[{
name : 'Investment1',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
iconCls:'task-folder',
children:[{
name : 'Model1',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model2',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model3',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf:true,
iconCls:'task'
},{
name : 'Model4',
Sync : '\/Date(1254283200000-0400)\/',
validate : 'Ok',
version : 'Management',
model_status : 'pending',
ev_status : 'pending',
val_comm : 'checked',
updated_by : 'samandee',
updated_on : '\/Date(1254283200000-0400)\/',
leaf: true,
iconCls: 'task'
}]
},{
name : 'Investment2',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf:true,
iconCls:'task'
},{
name : 'Investment3',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf:true,
iconCls:'task'
},{
name : 'Investment4',
Sync : '',
validate : '',
version : '',
model_status : '',
ev_status : '',
val_comm : '',
updated_by : '',
updated_on : '',
leaf: true,
iconCls: 'task'
}]
}]
}]
}
}

gladwinglady
16 Apr 2012, 8:00 AM
Hi, can any one tell me can I extend the Ext.ux.tree.TreeGrid ? If I extend the TreeGrid and try to load root from AsyncTreeNode its not showing the data. It works if I create the new object on Ext.ux.tree.TreeGrid.