PDA

View Full Version : tree panel with accordion layout



mashiki
3 Jan 2011, 6:53 PM
I'm making a menu with accordion layout and tree panel.
If I use long title as tree node, FireFox can display it correctly, but IE8 can not.
How can I correctly display it with IE8?

FireFox:
24069

IE8:
24068

test code:


<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1//resources/css/ext-all.css" />

<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1//adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1//ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout:'border',
items:[{ // header
html:'<h1 style="background-color:#ccccff;width:100%;height:100%">Header</h1>',
region:'north',
height:53
},{
region:'center',
layout:'border',
items:[{
region:'west',
width:150,
id: 'menu',
split:true,
layout:'accordion'
},{
region:'center',
html:'<h1>Main contents</h1>main contents...'
}]
}]
}); // end of viewport
var data = [{
text:'Menu1',menu:[{
text:'brunch11',menu:[
{text:'brunch111',menu:[
{text:'leef1111'},
{text:'leef1112'},
{text:'long long long title node 1113'}
]},
{text:'leef112'},
{text:'leef113'}
]
},{text:'brunch12',menu:[
{text:'leef121'},
{text:'leef122'}
]}]
},{
text:'Menu2',menu:[{
text:'brunch21',menu:[
{text:'brunch211',menu:[
{text:'leef2111'},
{text:'leef2112'},
{text:'long long long title node 2113'}
]},
{text:'leef212'},
{text:'leef213'}
]
},{text:'brunch22',menu:[
{text:'leef221'},
{text:'leef222'}
]}]
}];
for (var i=0,top; top=data[i]; ++i) {
// make TreePanels
var root = new Ext.tree.TreeNode({text:top.text});
//addNodes
(function(parent, childs) {
for (var i=0,cld; cld=childs[i]; ++i) {
// make node from childs[i]
var node = new Ext.tree.TreeNode({
text:cld.text,
leaf:!cld.menu
});
// add a node to parent
parent.appendChild(node);

// add child nodes if the node has child
if (cld.menu && cld.menu.length>0) {
arguments.callee(node, cld.menu);
}
}
})(root, top.menu); // call self recursive
var tp = new Ext.tree.TreePanel({
title:top.text,
rootVisible: false,
autoScroll: true,
containerScroll: true,
root: root
});
// add the node to tree
Ext.getCmp('menu').add(tp);
}
Ext.getCmp('menu').doLayout();
}); // end of onReady
</script>

</head><body>
</body></html>

6 Jan 2011, 3:21 PM
try setting your doctype to strict.

mashiki
7 Jan 2011, 12:22 AM
try setting your doctype to strict.

The script came to move correctly according to your instruction when strict was specified for doctype.

Thank you.