View Full Version : Unable to get appropriate view of a tree --pls help

20 Dec 2011, 12:19 AM
Hi all,
I am very new to extjs...and I started developing a tree. But I am not getting the appropriate view of the tree..the code of it is given below. Pls tell me where I am going wrong.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="C:/Users/abc/Desktop/my_eclipse/my_tree/WebContent/css/ext-all.css">
<script type="text/javascript" src="C:/Users/abc/Desktop/my_eclipse/my_tree/WebContent/js/ext-base.js"></script>
<script type="text/javascript" src="C:/Users/abc/Desktop/my_eclipse/my_tree/WebContent/js/ext-all-debug.js"></script>
<script type="text/javascript" src="C:/Users/abc/Desktop/my_eclipse/my_tree/WebContent/js/grid2treedrag.js"></script>

<title id="page-title">Tree</title>
<script language="javascript" type="text/javascript">
Ext.get(document.body).update('<div id="divEmployees"></div>');

Ext.BLANK_IMAGE_URL = 'C:/Users/abc/Desktop/ext-4.0.7-gpl/ext-4.0.7-gpl/resources/themes/images/gray/tree/elbow-plus-nl.gif';

var Tree = Ext.tree;

tree = new Tree.TreePanel({
title: 'Tree Panel',
iconCls: 'icon-basket',
titleCollapse: true,
//containerScroll: true,
style: 'padding-bottom: 10px',
lines: true,
rootVisible: true,
border: true,
width: 200,
height: 300,
enableDrag: true,
ddGroup: 'dropGroup1',
//selModel: new Ext.tree.MultiSelectionModel(),
root: {
nodeType : 'async',
text : 'Root_Node',
visible : true,
id : 'source',
expanded: true,
children: [ {id:'1',text: 'Menu1', leaf: true, visible: true, url: 'www.google.com' },{ id:'2',text:'Menu2',leaf: true },{ id:'3',text:'Menu3',leaf: true },{ id:'4',text:'Menu-c',leaf: false, children:
[ {id:'8',text: 'test2', leaf: true } ]},{ id:'5',text:'Menu5',leaf: true}, {id:'6',text:'Menu6',leaf: true}, {id:'7',text:'Menu7',leaf: true}]



// render the tree and expand the parent node


<div id='divEmployees' height="5000">

20 Dec 2011, 1:56 AM
You need to start much simpler than that. I've included a simple tree below that uses the same structure you provided. I recommend adding in config options one at a time, making sure that you understand exactly what they do from reading the docs. Gradually build up the functionality you need.

The code you posted mixes ExtJS 3 and ExtJS 4. I've assumed you actually want to use 4.0.7.

<title>ExtJS Forums</title>

<link rel="stylesheet" type="text/css" href="extjs-4.0.7/resources/css/ext-all.css"/>

<script type="text/javascript" src="extjs-4.0.7/ext-all-dev.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'extjs-4.0.7/resources/themes/images/default/tree/s.gif';

Ext.onReady(function() {
Ext.create('Ext.tree.Panel', {
height: 300,
renderTo: Ext.getBody(),
width: 300,
root: {
text: 'Root_Node',
id: 'source',
expanded: true,
children: [
{id: '1', text: 'Menu1', leaf: true, visible: true, url: 'www.google.com'},
{id: '2', text: 'Menu2', leaf: true},
{id: '3', text: 'Menu3', leaf: true},
id: '4',text: 'Menu-c', leaf: false, children: [
{id: '8', text: 'test2', leaf: true}
{id: '5', text: 'Menu5', leaf: true},
{id: '6', text: 'Menu6', leaf: true},
{id: '7', text: 'Menu7', leaf: true}

20 Dec 2011, 3:54 AM
Thanks for the input but my requirement is as shown in the following url
But with the code given, I am not getting any icons displayed
When i set Ext.BLANK_IMAGE_URL with an image path, it started showing three icons for the same node.
Please guide me.


20 Dec 2011, 1:07 PM
You still haven't confirmed which version of the framework you're using. The URL you provided is using ExtJS 3.

Ext.BLANK_IMAGE_URL can't just be set to an arbitrary image as it is in your original code. It must point to a 1x1 pixel transparent gif. My example shows a suitable location in ExtJS 4. If you're using ExtJS 3 then take a look at the example in the URL you provided, it shows you where to point it.

20 Dec 2011, 8:18 PM
I am using extjs 4 version itself. I set the image s.gif from the location that was mentioned in the first reply of this question. But I could not see any images loaded on the page. But many tutorials show various examples in which trees have folder image for root node, and some other images like + or - etc. How to get that effect? Should I use any css file? Should I mention the image explicitly with every node creation?

Please clarify.

20 Dec 2011, 8:32 PM
The default stylesheets point to images using paths like this:


You can either move your CSS and images into a directory called resources, or you can do a find/replace in the CSS file to change the paths to suit your needs.