View Full Version : Please help: Can't get treegrid working with Viewport

Joe Kuan
8 Oct 2010, 2:48 PM

I have spent considerable time trying to get the treegrid working but only failure. Much appreciated if anyone can spot any errors. All I get is a panel with columns but no tree.

Many thanks

Here is my test code

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="extjs/examples/ux/css/ux-all.css" />

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/ux/ux-all-debug.js"></script>

<script type="text/javascript" src="/tree.js"></script>
<title id='page-title'>AppQoS</title>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';

---------- tree.js ---------------

new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treegrid',
autoHeight: true,
width: 200,
autoScroll: true,
split: true,
dataUrl: "/tree.json",
columns: [ { header: 'host', dataIndex: 'Host' },
{ header: 'bytes', dataIndex: 'Bytes' },
{ header: 'duration', dataIndex: 'Duration' },
{ header: 'sessions', dataIndex: 'Sessions' } ],
root: new Ext.tree.AsyncTreeNode({
expanded: true,
text: 'Tree'
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');

------- tree.json ---------

[{ Host:"Top 10 originating address usage", Bytes:1000000, Duration:3.5, Sessions:2300, expanded:true,
iconCls:"task-folder", leaf: false, children:[ {Host:"",Bytes:200000,Duration:0.5,Sessions:100,leaf:true,iconCls:"host"}, {Host:"",Bytes:200000,Duration:0.2,Sessions:200,leaf:true,iconCls:"host"}, {Host:"",Bytes:100000,Duration:0.2,Sessions:500,leaf:true,iconCls:"host"}, {Host:"",Bytes:100000,Duration:0.5,Sessions:300,leaf:true,iconCls:"host"}, {Host:"",Bytes:100000,Duration:0.1,Sessions:100,leaf:true,iconCls:"host"}, {Host:"",Bytes:100000,Duration:0.1,Sessions:200,leaf:true,iconCls:"host"}, {Host:"",Bytes:50000,Duration:0.4,Sessions:400,leaf:true,iconCls:"host"}, {Host:"",Bytes:50000,Duration:0.8,Sessions:200,leaf:true,iconCls:"host"},

8 Oct 2010, 10:44 PM
1. The border layout of the viewport will determine the height of the tree, so the tree shouldn't be configured with autoHeight:true.
2. Setting the tree to rootVisible:false will automatically expand your root, so the root shouldn't be configured with expanded:true.
3. Not sure, but don't tree columns need a width?

Joe Kuan
9 Oct 2010, 1:15 AM
Thanks for the reply.

What really caught me was that if the column width is not specified, the tree won't show. I would have thought extjs handle that. It's all working nicely now.