sonic64
04-16-2007, 07: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
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