PDA

View Full Version : How to using TreeGrid in Extjs3.2.1



anya
13 May 2010, 10:26 PM
? Extjs3.2.1?????TreeGrid? ????????????????

<script src="http://www.extjs.com/deploy/dev/adapter/ext/ext-base-debug.js" type="text/javascript"></script>
<script src="http://www.extjs.com/deploy/dev/ext-all.js" type="text/javascript"></script>

<script type="text/javascript" src="http://www.extjs.com/deploy/dev/examples/ux/treegrid/TreeGridSorter.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/examples/ux/treegrid/TreeGridColumnResizer.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/examples/ux/treegrid/TreeGridNodeUI.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/examples/ux/treegrid/TreeGridLoader.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/examples/ux/treegrid/TreeGridColumns.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/examples/ux/treegrid/TreeGrid.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();

var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,
columns: [{
header: 'Task',
dataIndex: 'task',
width: 230
}, {
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if (v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
}, {
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],
url: 'http://www.extjs.com/deploy/dev/examples/treegrid/treegrid-data.json'

});
});
// tree.store.load();
</script>?
??????
?????
20506

anya
14 May 2010, 6:06 PM
????

anya
14 May 2010, 6:10 PM
treegrid ???????????

rose2010
17 May 2010, 12:06 PM
????

Hi

I am new on EstJs. How did you make it work?

anya
19 May 2010, 1:33 AM
tall me your email,

rose2010
19 May 2010, 4:36 AM
tall me your email,
[email protected]

rjdsgomes
19 May 2010, 5:57 AM
Hi,
Ive a problem and search around and cant find solution. I copy the example of tree grid at official samples site adn included all necessary javascripts and do this.

var tree1 = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,

columns:[{
header: 'Task',
dataIndex: 'task',
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],

dataUrl: 'treegrid-data.json'
});


var tree2 = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,

columns:[{
header: 'Task',
dataIndex: 'task',
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],

dataUrl: 'treegrid-data.json'
});

The trees show up fine, the problem is with the column sort. It doesn't work. If i just have on tree it sorts fine by column, if i put two trees sort column stops to work. I tried to do some debug and i found that when i have two trees the sort function is someone attached to one grid only...

Can anybody try using two tree grids and try sorting them?

Thanks

waitforsunny
27 May 2010, 6:51 PM
[email protected]

ypwong
3 Jun 2010, 1:18 PM
the dataUrl does not seem to work if it is a file... if you put it in your localhost web server of some type it will work fine.
example: dataUrl: 'http://localhost/treegrid-data.json'

rose2010
3 Jun 2010, 4:24 PM
the dataUrl does not seem to work if it is a file... if you put it in your localhost web server of some type it will work fine.
example: dataUrl: 'http://localhost/treegrid-data.json'

Thanks for the reply.
I found my issue: I use v3.2.0 ExtJs ext-all.js and ext-base.js, somehow it doesn't work. I downloaded the example website's js file instead of using my js files. not sure what changed in their ext-xx.js files.

clickor
16 Jun 2010, 9:17 PM
[email protected]

rajasekhar theja
18 Mar 2012, 11:15 PM
i need to know if tree grid is possible for extjs below 3 version . if possble let me know the sample code. for me this is urgent