View Full Version : Change height or position of Tree.TreePanel plz

19 Sep 2010, 2:33 PM
Trying to modify either the Region CSS of a treepanel or the following code so that my treepanel appears in the bottom left corner. I tried using southwest as region but realize this doesn't exist so where in the CSS can I modify the existing regions (west/east)? Or else is there any easier way to do this with the below code, Just trying to get multiple tree.treepanel on the left of my page both with hide/show buttons but one on the top left and one on the bottom left corner, any help greatly appreciated!

// create a treePanel object. Note that the region:'west' is what tells Ext which panel to display the tree in
var tree2 = new Tree.TreePanel({
region: 'east',
//el:'tree-div', // since we will be attching this to a panel, we dont need to attach it to a div on the page

// these are the config options that we need to define how the treePanel iteractes with the ViewPort when we attach it
id: 'west-panel2',
title: 'Legend',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '35 0 5 5',
cmargins: '35 5 5 5',

// this adds a root node to the tree and tells it to expand when it is rendered
root: new Tree.AsyncTreeNode({
text: 'Base Map',
draggable: false,
expanded: true,
id: '0'

// Add a listener to the tree to do something when a node is clicked.
tree2.addListener('click', function (node, event) {
alert(node.attributes.id + '=' + node.attributes.text);

// Add a listener to take some action when a node is moved.
tree2.addListener('movenode', function (tree, node, oldParent, newParent, index) {
alert('moved. Old parent node id=' + oldParent.id + '. new parent node id=' + newParent.id);

/* End of tree2 definition */

// Define the Viewport object. This is a modifed version of the original example code
var viewport = new Ext.Viewport({
layout: 'border',
items: [
// add a centre panel and some items
xtype: 'portal',
region: 'center',
margins: '35 5 5 0',
// add the items. The original had lots of panels arranged in 3 columns.
// I have removed all but two panels and they are in one column which is in preparation for
// the next part of my project
items: [{
columnWidth: 1, // It was .33 to make it the first of the 3 panels. I only want one panel
baseCls: 'x-plain',
bodyStyle: 'padding:10px 0 10px 10px',
items: [{
title: 'Webmap - Map panel',
collapsible: true,
draggable: true,
frame: true,
tools: tools,
html: '<html><body>Hello There!</body></html>'

] // end of centre panel contents

}, // end of first viewport item

// Now, here is the "non-intuitive" bit. We can just add the tree object directly as another "item" !!
// The region:'west' on the treePanel object definition above tells it to use the est panel of the viewPort
// and all the configuration of the panel is picked up from the tree object itself, rather than having to
// be defined directly here

] // end viewport items array
}); // end of viewport object definition
}); // end of Ext.onReady function