PDA

View Full Version : Tree in West layout



sonic64
16 Apr 2007, 4:11 PM
Hello,

I am constructing my tree from xml using a function. But that function requires that I create first a container for the tree in my html file. I want to put this tree in the west region of my layout. I am having a hard time making all this work.

Here is what my code looks like:


//function that creates tree from xml
function createXmlTree(el, url, callback) {

var tree = new Ext.tree.TreePanel(el);
var p = new Ext.data.HttpProxy({url:url});
p.on("loadexception", function(o, response, e) {
if (e) throw e;
});
p.load(null, {
read: function(response) {
var doc = response.responseXML;
tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
}
}, callback || tree.render, tree);
return tree;

}

//function that defines layout + call to the function that constructs the tree
var TreeTest = function(){

return {
init : function(){
Ext.QuickTips.init();
var layout = new Ext.BorderLayout('layout', {
west: {
initialSize:200,
split:true,
titlebar:true
},
center: {
alwaysShowTabs:true,
tabPosition:'top'
}
});

var albums = layout.getEl().createChild({tag:'div', id:'albums'});

var viewEl = albums.createChild({tag:'div', id:'folders'});

var folders = layout.add('west', new Ext.ContentPanel(albums, {
title:'Lots et Ouvrages',
fitToFrame:true,
autoScroll:true,
autoCreate:true,
//toolbar: tb,
resizeEl:viewEl
}));

var images = layout.add('center', new Ext.ContentPanel('images', {
title:'Detail des Ouvrages',
fitToFrame:true,
autoScroll:true,
autoCreate:true
}));
var imgBody = images.getEl();


var Tree = new createXmlTree('tree', 'tree.php');



var rz = new Ext.Resizable('layout', {
wrap:true,
pinned:true,
adjustments:[-6,-6],
minWidth:300
});
rz.on('resize', function(){
layout.layout();
});
rz.resizeTo(650, 350);
}
};
}();
Ext.onReady(TreeTest.init, TreeTest, true);



In my html:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Organizing Images into Albums</title>
<link rel="stylesheet" type="text/css" href="ext-1.0-beta2/resources/css/ext-all.css" />

<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="ext-1.0-beta2/adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="ext-1.0-beta2/adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="ext-1.0-beta2/ext-all.js"></script>

<script type="text/javascript" src="organizer.js"></script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="ext-1.0-beta2/examples/examples.css" />

<link rel="stylesheet" type="text/css" href="organizer.css" />
</head>
<body>
<div id="layout"></div>
<br /><br /><br /><br /><br />
</body>
</html>




What is missing is the <div id=tree></div> that I am having trouble finding the right place to place it.

Any suggestion will be highly appreciated.

Thanks

Animal
16 Apr 2007, 11:31 PM
It doesn't matter where you put it. You are going to create a ContentPanel from it, and add that ContentPanel to the west Region, just like any other ContentPanel.

sonic64
17 Apr 2007, 2:42 AM
Thanks Animal...
I do not see how to create a contentpanel from a div. Actualy I have a tree panel, and a contentpanel. I thought that was enough to put in the west region of the layout.


var albums = layout.getEl().createChild({tag:'div', id:'tree'});

var viewEl = albums.createChild({tag:'div', id:'folders'});

var folders = layout.add('west', new Ext.ContentPanel(albums, {
title:'Lots et Ouvrages',
fitToFrame:true,
autoScroll:true,
autoCreate:true,
//toolbar: tb,
resizeEl:viewEl
}));
...

var Tree = new createXmlTree('tree', 'tree.php');
Could you please precise what is wrong with my code?
Thanks

sonic64
17 Apr 2007, 3:40 AM
Ok...I fixed it..I just had a line that did not make sense there:


resizeEl:viewEl

corrievm01
22 Oct 2014, 3:51 AM
I am using Sencha extjs 5. I am having trouble to load a tree menu in the west layout. I can't seem to display anything. Please assist.Here is my Main.js code:
items: [ { title: 'Navigation',
region:'west',
floatable: false,
margin: '5 0 0 0',
width: 200,
minWidth: 100,
maxWidth: 350,
html: '<script type="text/javascript" src="app/view/app.js"></script>' }
Here is my app.js code:
Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody('west'),
title: 'Simple Tree',
region:'west',
width: 300,
height: 250,
root: { text: 'Root',
expanded: true,
children: [{ text: 'Child 1', leaf: true },
{ text: 'Child 2', leaf: true },
{ text: 'Child 3', expanded: true,
children: [{ text: 'Grandchild', leaf: true }] }]}});