How to add a tree panel to a viewport ?

[murrah]

Hi,

I am new to Ext and have jumped right into v2. I love it and am getting frustrated by the lack of examples.

I want a layout with a tree in the west and in the centre panel a list of records that displays when a tree node is clicked.

So, I started with the v2 panel example and played with it to learn. I have removed the accordion in the west and replaced it with some text as follows:

var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',

/* The accordion was here: ie layout:'accordion', etc.
I replaced it with the following inner panel just to make sure I could and the 'fit' layout seemed the simplest replacement to test with. */

layout:'fit',
items: {title: 'Inner Panel', html: '<p>This is the inner panel content</p>', border: false}

}, // end first viewport item. Rest of viewport follows ....

So far, so good. That all works.

Now, I have created a separate page that has just a tree panel on it:

var tree = new Ext.tree.TreePanel({ etc ... })

and that all works fine too.

However, what I cant figure out is how to put a tree panel into the west region of my view port. It is probably really obvious but I dont get it.

Can anyone give me a skeleton for how that is done please ?

Thanks,
Murray

[serik]

hi.

i have the same problem with tree and grid.

cant put external file into panel..

if somebody knows how to solve it, please help

[mpriatel]

One of things that is a little different from other windowing toolkits eg (AWT,Swing) is that you don't specify which region a component is assigned to when you call the target containers 'add()' method. Instead, the region a component is assigned to is always specified by the component itself.

Eg, if you declare a component like your TreePanel you must assign the region you intend for it to be assigned to:

var yourTree = Ext.TreePanel({

  region:'west'

}); 

Then you just add it to a target container by adding it to the list of 'items', eg

var viewport = new Ext.Viewport({

  layout:'border',

  items:[

     {

       // a component created by configuration...

       region:'north',

       id:'north-panel',

       // etc.

     },

     // a reference to an existing component --the container will look at its 'region'

     // property to figure out where it should go.

     yourTree,

     ]

}); 

[ckr]

Thanks, I was looking for that too!!

I still cannot figure out how you knew to add the region property as a part of the component. I did not see where that is inherited from.

Chuck

[murrah]

Thank you mpriatel !

That has solved the problem and now I understand the architecture better. Does that "architectural overview" exist anywhere on the Ext site ? How did you figure that out? I am very happy to read any documentation but I cant find very much of that background type of info.

Thanks again.
Murray

[murrah]

I thought it might be useful if I included a working version.

Replace the script block on the original example portal.html with this block.

<script type="text/javascript">
		
		/*  An adaptation of the 2.0a1 portal example http://extjs.com/deploy/ext-2.0-alpha1/examples/layout/portal.html
			to replace the accordion in the west panel with a tree (and also changed the centre region to single column panels,
			rather than the three columns.
			The code below is the only thing that was changed from the original portal example. You will need to provide your
			own json data for the tree - see the comment below
		*/ 

   Ext.onReady(function(){

					
       Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

       // create some portlet tools
       var tools = [{
           id:'gear',
           handler: function(){
               Ext.Msg.alert('Message', 'The Settings tool was clicked.');
           }
       },{
           id:'close',
           handler: function(e, target, panel){
               panel.ownerCt.remove(panel, true);
           }
       }];

			/*  Add the tree object. At this stage it isnt attached to the layout - it is just a stand alone object
				This section was added to the example
			*/
			
			    // shorthand reference to (slightly) reduce complexity later
			    var Tree = Ext.tree;
			    
				// create a treePanel object. Note that the region:'west' is what tells Ext which panel to display the tree in 
			    var tree = new Tree.TreePanel({
					region:'west',
			        //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-panel',
	                title:'West',
	                split:true,
	                width: 200,
	                minSize: 175,
	                maxSize: 400,
	                collapsible: true,
	                margins:'35 0 5 5',
	                cmargins:'35 5 5 5',
					
					// these are the config options for the tree itself				
			        autoScroll:true,
			        animate:true,
			        enableDD:true, // Allow tree nodes to be moved (dragged and dropped)
			        containerScroll: true, 
			        loader: new Tree.TreeLoader({
			            dataUrl:'ajaxwrapper.cfc?method=getLinkCategoriesForExtTree'  // you will need to replace this with your own json data. See below for what my call returns for the root node
			        }),
					
					// this adds a root node to the tree and tells it to expand when it is rendered
			        root: new Tree.AsyncTreeNode({
				        text: 'Categories',
				        draggable:false,
						expanded:true,
				        id:'0'
			         })		
			    });
			
				// Add a listener to the tree to do something when a node is clicked. 	
				tree.addListener('click', function (node, event){
					alert(node.attributes.id+'='+node.attributes.text);
				});
			
				// Add a listener to take some action when a node is moved. 
				tree.addListener('movenode', function (tree, node, oldParent, newParent, index){
					// alert('moved. Old='+ oldParent+'. new='+newParent);
				});

			/* End of tree 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: 'Panel 1',
                       draggable:true,
                       collapsible:true,
                       frame:true,
                       tools: tools,
                       html: Ext.example.shortBogusMarkup
                   },{
                       title: 'Another Panel 1',
                       collapsible:true,
                       draggable:true,
                       frame:true,
                       tools: tools,
                       html: Ext.example.shortBogusMarkup
                   }]
               
			}] // 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
		tree
		
		] // end viewport items array 
       }); // end of viewport object definition
   }); // end of Ext.onReady function
</script>

The json for the root node. This is returned by my coldfusion component. I just include it so you can see what the tree json looks like.

[{"text":"Energy","id":"2","cls":"folder"},{"text":"Food","id":"4","cls":"folder"},{"text":"Permaculture","id":"1","leaf":true,"cls":"file"},{"text":"Shelter","id":"5","cls":"folder"},{"text":"Water","id":"3","leaf":true,"cls":"file"}]

[murrah]

I posted a working solution with comments and files on my web site.

Check this post for details: http://extjs.com/forum/showthread.php?t=14507

Murray