PDA

View Full Version : using ext dom helper



pailyanish
24 Sep 2009, 2:38 AM
I've been struggling for a couple of hours to get started with dom helper i have appended a
div to tree the main problem is on appending a div tag the information that i have appended
on the next line i need to get it in same line is there any way show it on same line using div tag

on giving span the layer information comes on same line
but i want use div tag



<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layers</title>
<link rel="stylesheet" type="text/css" href="http://localhost/ext-3/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://localhost/ext-3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://localhost/ext-3/ext-all.js"></script>

<style type="text/css">
.new {
width:12px !important;
margin-left:120px;
position:relative;
}
</style>

</head>
<body>
<script>

Ext.onReady(function(){
var layerTreeLib = new Ext.tree.TreePanel({
id:'layer_container',
title:'Layer Themes',
height:'auto',
border:true,
frame:true,
bodyStyle:'padding:5px 10px 0',
minSize: 150,
width : 400,
autoScroll: true,
rootVisible: false,
lines: false,
singleExpand: true,
//loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
id :'root',
children: [
{
"text" : "SQL Server", "id" : "SQLSERVER", "leaf" : false, "cls" : "folder",
expanded:true,
"children" :
[
{"text" : "Fuel Economy ", id : "10", leaf : true},
{"text" : "Invoice ", "id" : "11", "leaf" : true, },
{"text" : "MSRP ", "id" : "12", "leaf" : true, },
{"text" : "Options ", "id" : "13", "leaf" : true,},
{"text" : "Specifications", "id" : "14", "leaf" : true}
]
}
]

})

});

layerTreeLib.render(document.body);
layerdivs= new Array();
var divs=document.getElementById('layer_container').getElementsByTagName("div");
//alert(divs.length);
var i ,j =0;
for(i =0;i<divs.length;i++){
if(divs[i].className == 'x-tree-node-el x-tree-node-leaf x-unselectable '){
layerdivs[j] = divs[i];
j++;
}
}
for(i =0;i<layerdivs.length;i++){

id = 'layerinfo'+i;

var dh = Ext.DomHelper;
dh.append(layerdivs[i],[
{
tag:'div',
id:id,
html:"Layer Information",
cls : "new"
}
]);
}
});

hendricd
24 Sep 2009, 3:21 AM
@pailyanish --

What you are attempting will be difficult to say the least. Ext Trees have several different rendering modes and Drag/Drop dependencies that you are not currently considering. :-?

The customary (frankly, easier) method of customizing the Tree rendering is to subclass/override Ext.tree.TreeNodeUI.

Have a look at its source and examine its renderElements method before proceeding.