View Full Version : ExtJS TreeGrid help !

28 Jan 2011, 12:16 PM
We are trying to create ExtJS treeGrid with multiple columns (in version 3.2). We found the ext-all.js does not have TreeGrid related configuration code. Do we have to add the code from TreeGrid.js to ext-all.js file?

Following is what we are using in java file and it's not displaying anything (we just want to start off with display of columns):

var tree = new Ext.tree.TreeGrid({
xtype: 'treegrid',
title: 'Encyclopedia',
width: 400,
height: 500,
animate: false,
autoScroll: true,
renderTo: Ext.getBody(),
containerScroll: false,
border: false,
enableDD: true,
root : new Ext.tree.AsyncTreeNode({text: 'Root'}),
loader: new Ext.tree.TreeLoader({preloadChildren: true}),
columns: [{
header: 'Item',
dataIndex: 'item',
width: 230
}, {
header: 'Type',
width: 150,
dataIndex: 'type'


27 Jul 2011, 3:38 PM

if you're using version 3 code, the files you need are:

<script type="text/javascript" src="/Assets/JavaScript/Ext/Ext-base.js"></script>
<script type="text/javascript" src="/Assets/JavaScript/Ext/Ext-all-debug.js"></script>

<!-- Extensions - tree grid -->
<script type="text/javascript" src="/Assets/JavaScript/Ext/Ux/Treegrid/TreeGridSorter.js"></script>
<script type="text/javascript" src="/Assets/JavaScript/Ext/Ux/Treegrid/TreeGridColumnResizer.js"></script>
<script type="text/javascript" src="/Assets/JavaScript/Ext/Ux/Treegrid/TreeGridNodeUI.js"></script>
<script type="text/javascript" src="/Assets/JavaScript/Ext/Ux/Treegrid/TreeGridLoader.js"></script>
<script type="text/javascript" src="/Assets/JavaScript/Ext/Ux/Treegrid/TreeGridColumns.js"></script>
<script type="text/javascript" src="/Assets/JavaScript/Ext/Ux/Treegrid/TreeGrid.js"></script>

Your code should be added at the end of these files.

If you're working with ExtJS 4, following the example for the code at http://dev.sencha.com/deploy/ext-4.0.2a/examples/tree/treegrid.html, the files are

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css (http://www.sencha.com/forum/view-source:http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css)">
<link rel="stylesheet" type="text/css" href="../shared/example.css (http://www.sencha.com/forum/view-source:http://dev.sencha.com/deploy/ext-4.0.2a/examples/shared/example.css)">
<script type="text/javascript" src="../../bootstrap.js (http://www.sencha.com/forum/view-source:http://dev.sencha.com/deploy/ext-4.0.2a/bootstrap.js)"></script>

In both cases you'll have to tweak your paths, as well as understand what the base dependencies are in the case of ExtJS 4.


Aldo Salzberg