PDA

View Full Version : Display tree model in custom view



inf3rno
25 Dec 2010, 4:11 AM
Hi!

I have got the work of making a layout editor.
I have got data like this:


{
text: "column_15", leaf: false, children:
[
{
text: "column_05", leaf: false, children:
[
{text: "menu", leaf: true},
{text: "search", leaf: true}
]
},
{
text: "column_10", leaf: false, children:
[
{text: "news", leaf: true}
]
}
]
}
, and at first step I have to display it like so:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="title">Layout Editor</title>
<body>
<style>
.layout-container
{
width: 500px;
height: 500px;
padding: 15px;
background-color: lightblue;
text-align: center;
}

.column-container
{
border: 1px solid black;
float: left;
margin: 2px;
padding: 5px;
}

.column-15
{
width: 490px;
}

.column-10
{
width: 300px;
}

.column-05
{
width: 150px;
}

.column-label
{

}

.column-children
{

}

.block-container
{
border: 1px solid black;
margin: 2px;
padding: 5px;
}

.block-label
{

}
</style>
<div id="layout-container" class="layout-container">
<div class="column-container column-15">
<a class="column-label" href="javascript:" >column_15</a>
<div class="column-children">
<div class="column-container column-10">
<a class="column-label" href="javascript:" >column_10</a>
<div class="column-children">
<div class="block-container">
<a class="block-label" href="javascript:" >menu</a>
</div>
<div class="block-container">
<a href="javascript:" >search</a>
</div>
</div>
</div>
<div class="column-container column-05">
<a class="column-label" href="javascript:" >column_05</a>
<div class="column-children">
<div class="block-container">
<a class="block-label" href="javascript:" >news</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
23975


I am newbie in extjs, I was thinking about it, and in my opinion this is the way it should be done:
I load the data into TreeNodes, and I display them with custom uiProviders. The ColumnNodeUI will render column layout and the LeafNodeUI will render simple box with text.
I wrote this part the simplest way I know: I modified the JSON with the uiProvider attribute:


[
{
text: "column_15", leaf: false, uiProvider: "column", children:
[
{
text: "column_05", leaf: false, uiProvider: "column", children:
[
{text: "menu", leaf: true, uiProvider: "leaf"},
{text: "search", leaf: true, uiProvider: "leaf"}
]
},
{
text: "column_10", leaf: false, uiProvider: "column", children:
[
{text: "news", leaf: true, uiProvider: "leaf"}
]
}
]
}
]
A made a html for trying this out:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="title">Layout Editor</title>
<link rel="stylesheet" type="text/css" href="http://localhost/layout/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="http://localhost/layout/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://localhost/layout/extjs/ext-all.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = "http://localhost/layout/extjs/resources/images/default/s.gif";</script>
<script type="text/javascript">

var sizeFactor=150;

Ext.ns("Ext.le");
Ext.le.RootNodeUI=Ext.tree.RootTreeNodeUI;
Ext.le.ColumnNodeUI=Ext.tree.TreeNodeUI;
Ext.le.LeafNodeUI=Ext.tree.TreeNodeUI;

Ext.onReady(function ()
{
new Ext.tree.TreePanel(
{
renderTo: "layout-container",
root: new Ext.tree.AsyncTreeNode(
{
text: "",
uiProvider: Ext.le.RootNodeUI,
expanded: true
}),
rootVisible: false,
loader: new Ext.tree.TreeLoader(
{
dataUrl: "test.json",
baseAttrs:
{
expanded: true
},
uiProviders:
{
column: Ext.le.ColumnNodeUI,
leaf: Ext.le.LeafNodeUI
}
})
});
});
</script>
</head>
<body>
<div id="layout-container" style="margin-top: 50px; margin-left: 50px;"></div>
</body>
</html>
My question is: how to modify the ColumnNodeUI and the LeafNodeUI to display the nodes like in the first html?
I tried to overwrite ColumnNodeUI.renderElements, to render column layout but it's too complicated for me. :S Can anybody help?

inf3rno
28 Dec 2010, 3:48 PM
I tried to extend the TreeNodeUI, and I can display nodes in this view, but it's a really hard thing... The Ext.data.Tree and Ext.data.Node classes are nice, but the Ext.tree package is really a mess. :S It's tight coupled, and its writer didn't understand what MVC means... I'll write a bug report, and an extension for managing trees.

inf3rno
13 Jan 2011, 6:14 AM
I'm ready with my extension, you can download it from here: https://github.com/inf3rno/Ext.ux.tree. (https://github.com/inf3rno/Ext.ux.tree) Please send me a message if you find any bugs (I didn't develop it with TDD...).