View Full Version : How to resize a Tree.TreePanel or move it do a different region

19 Sep 2010, 2:29 PM
I am trying to get my tree panel to appear in the bottom left corner or Southwest. I tried putting region as southwest but realize there is no region existing for this. My question is where in the CSS can I find settings for the regions (west, east etc) so that I might change the placement of my treepanel or what can I do to modify my below code to do this. All I am trying to do is have 2 treepanels on the left of the screen with the hide/show buttons but one of them has to be 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