PDA

View Full Version : Insert Tree



Puzo
21 May 2009, 4:46 AM
Hello, its me again.

I have a problem with inserting Tree menu to my "page".

Here is my code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ExtJsLayout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var eastPanelHidden = true;
var westPanelHidden = false;
var westPanelBtn;
var eastPanelBtn;
var eastPanel;
var containerPanel;
var viewport;
var tab1;
var tab2;
var detail2;
var invDetailPanel;
var mainTabPanel;
var detailsPanel;
var centerPanel;

var action1 = new Ext.Action({
text: 'Action 1',
handler: function(){
Ext.Msg.alert('Click','You clicked on "Action 1".');
}
});
var action2 = new Ext.Action({
text: 'Action 2',
handler: function(){
Ext.Msg.alert('Click','You clicked on "Action 2".');
}
});
var action3 = new Ext.Action({
text: 'Action 3',
handler: function(){
Ext.Msg.alert('Click','You clicked on "Action 3".');
}
});
var action4 = new Ext.Action({
text: 'Action 4',
handler: function(){
Ext.Msg.alert('Click','You clicked on "Action 4".');
}
});


var mainTBar = new Ext.Toolbar({
items:[action1,
{
text: 'Menu 1',
menu: [action2,action3,action4]
},
{
text: 'Menu 2',
menu: [action2,action3,action4]
}]
})

var westPanelBtn = new Ext.Button({
xtype: 'tbbutton',
text: 'West Panel',
handler: toggleWestPanel,
enableToggle:true,
pressed:true
});

var eastPanelBtn = new Ext.Button({
xtype: 'tbbutton',
text: 'East Panel',
handler: toggleEastPanel,
enableToggle:true,
pressed:true
});

function toggleEastPanel() {
if (eastPanel) {
if (eastPanelHidden == false) {
eastPanel.hide();
eastPanel.ownerCt.doLayout();
} else {
eastPanel.show();
eastPanel.ownerCt.doLayout();
eastPanel.expand();
}
eastPanelHidden = !eastPanelHidden;
}
}
function toggleWestPanel() {
if (westPanel) {
if (westPanelHidden == false) {
westPanel.hide();
westPanel.ownerCt.doLayout();
} else {
westPanel.show();
westPanel.ownerCt.doLayout();
westPanel.expand();
}
westPanelHidden = !westPanelHidden;
}
}

var tabsTBar = new Ext.Toolbar({
items:[westPanelBtn,
{xtype: 'tbspacer'},
eastPanelBtn
]
})

function onTabChange(tabPanel, tab) {
switch (tab.id) {
case 'tab-1':
detail2.hide();
invDetailPanel.show();
break;
case 'tab-2':
invDetailPanel.hide();
detail2.show();
break;
}
}

Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

tab1 = {
id:'tab-1',
contentEl:'pnl-tab1',
title: 'Tab 1',
viewConfig: {layout:'fit'},
autoScroll:true
}

tab2 = {
id:'tab-2',
contentEl:'pnl-tab2',
title: 'Tab 2',
viewConfig: {layout:'fit'},
autoScroll:true
}

mainTabPanel = new Ext.TabPanel({
region: 'center',
margins: '0 0 0 0',
//tbar: tabsTBar,
activeTab: 0,
enableTabScroll:true,
items: [tab1,tab2]
});

invDetailPanel = new Ext.Panel({
contentEl:'pnl-detail1',
autoScroll:true,
border:false
});

detail2 = new Ext.Panel({
contentEl:'pnl-detail2',
autoScroll:true,
border:false
})

detailsPanel = new Ext.Panel({
region: 'south',
height:300,
margins: '0 0 0 0',
cmargins: '5 0 0 0',
title: 'Details',
split: true,
layout:'fit',
collapsible: true,
collapsemode: 'mini',
items:[invDetailPanel,detail2]
});



westPanel = new Ext.FormPanel({
region: 'west',
border:true,
title: 'West Panel',
margins: '40 0 0 0',
cmargins: '40 5 0 0',
bodyStyle:'padding:5px 5px 5px 5px',
autoScroll:true,
labelWidth:100,
collapsible:true,
split:true,
width:340,
minSize: 340,
maxSize: 400
});


centerPanel = new Ext.Panel({
margins: '40 0 0 0',
region:'center',
layout:'border',
border:false,
items:[mainTabPanel,detailsPanel]
});


Tree_Category_Loader = new Ext.tree.TreeLoader({
dataUrl :"_class3.php"
});

Tree_Category = new Ext.tree.TreePanel({
title : 'Menu',
collapsible : false,
animCollapse : false,
border : true,
id : "DataTree",
el : "DataTree",
autoScroll : true,
animate : false,
enableDD : true,
containerScroll : true,
height : 100,
width : 300,
loader : Tree_Category_Loader
});

// SET the root node.
Tree_Category_Root = new Ext.tree.AsyncTreeNode({
text : 'My Root Node',
draggable : false,
id : '0' // this IS the id of the startnode
});

// Render the tree.
Tree_Category.setRootNode(Tree_Category_Root);
Tree_Category.render();
Tree_Category_Root.expand();

eastPanel = new Ext.Panel({
id:'eastPanel',
title:'Menu',
contentEl:'pnl-detail3',
collapsible:true,
split:true,
margins: '40 0 0 0',
cmargins: '40 0 0 5',
region:'east',
layout:'fit',
width:300,
minSize: 100,
items : [tree]
});
containerPanel = {
header: false,
title: 'Menu',
tbar: mainTBar,
border:false,
layout:'border',
items:[
westPanel,
centerPanel,
eastPanel
]
}
viewport = new Ext.Viewport({
layout:'fit',
items:[
containerPanel
]
});

toggleEastPanel();
toggleWestPanel();
mainTabPanel.on('tabchange',onTabChange);
});
}
</script>
</head>
<body>

<div id="pnl-tab1">Tab 1</div>
<div id="pnl-tab2">Tab 2</div>
<div id="pnl-detail1">Detail 1</div>
<div id="pnl-detail2">Detail 2</div>
<div id="pnl-detail3">
<div id="DataTree" ></div>
</div>
</body>
</html>

and here is my _class3.php:


<?php

class tx_taw_models_ProjectCategoryListProxy{

/*
* Load tree node.
*/
function getTree($TYPO3_db,$TYPO3_db_username,$TYPO3_db_password,$TYPO3_db_host,$node){
$conn = mysql_connect($TYPO3_db_host, $TYPO3_db_username, $TYPO3_db_password);
mysql_select_db($TYPO3_db, $conn);
$nodes = $this->display_children($node);
mysql_close($conn);
print json_encode($nodes);
}

// http://www.sitepoint.com/article/hierarchical-data-database
// http://extjs.com/forum/archive/index.php/t-10082.html
// $parent is the parent of the children we want to see
// $level is increased when we go deeper into the tree,
// used to display a nice indented tree

function display_children($parent) {
// retrieve all children of $parent
$result = mysql_query( 'SELECT uid, upc_name, upc_parent, upc_order ' .
'FROM tx_taw_user_project_category ' .
'WHERE upc_parent = ' . $parent . ' ' .
'ORDER BY upc_order;');
// display each child
while ($row = mysql_fetch_array($result)) {
// Response parameters.
$path['text'] = html_entity_decode($row['upc_name']);
$path['id'] = $row['uid'];
$path['position'] = $row['upc_order'];
// Check if node is a leaf or a folder.
$cResult = mysql_query( 'SELECT uid, upc_name, upc_parent, upc_order ' .
'FROM tx_taw_user_project_category ' .
'WHERE upc_parent = ' . $row['uid'] . ' ' .
'ORDER BY upc_order;');
$cCount = mysql_num_rows($cResult);
if($cCount > 0){
$path['leaf'] = false;
$path['cls'] = 'folder';
}else{
$path['leaf'] = true;
$path['cls'] = 'file';
}

// call this function again to display this
// child's children
$nodes[] = $path;
}
return $nodes;
}
}
$treeDataModel = new tx_taw_models_ProjectCategoryListProxy;
$node = $_POST['node'];
if ($node == 0){ // < if itīs the first node
$node = 1; // Initial node.
}
$treeDataModel ->getTree('tig3rb0y_rmplus','tig3rb0y_rmplus','rmplus','localhost', $node);

?>And here is my printscreen: http://www.shrani.si/t/3y/Ul/4xIkjtBy/extjstree.jpg (http://www.shrani.si/?3y/Ul/4xIkjtBy/extjstree.jpg)

Animal
21 May 2009, 4:56 AM
DO NOT USE IE AS YOUR PRIMARY DEV PLATFORM!

You have a Javascript error there. But what is it?

Use Firefox with Firebug.

And why overnest like that?

Whty have a Viewport containing a Panel which is layout: 'border'? EH?

Why not just use layout: 'border' in the Viewport?

You have some thinking to do.

Animal
21 May 2009, 4:58 AM
East panel CONTAINING a Tree?

OVERNEST! AGAIN! WHY?

Have you included the CSS? From the correct path?

Of course you would be able to see and check if youe were using Firebug!

Puzo
21 May 2009, 6:49 AM
Hi,

I recheck my code again and I put unnecessarycode away. I helped a lot with FireBug, THANKS. so I clean up my page. Now, the Tree is working fine, but now I have a new problem.

In my SQL databse I have 4 parents categories and some childs. Why the tree menu echoes only first parent and his childs?

Puzo
21 May 2009, 9:32 AM
Here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ExtJsLayout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var eastPanelHidden = true;
var eastPanelBtn;
var eastPanel;
var containerPanel;
var viewport;
var tab1;
var tab2;
var detail2;
var invDetailPanel;
var mainTabPanel;
var detailsPanel;
var centerPanel;

var eastPanelBtn = new Ext.Button({
xtype: 'tbbutton',
text: 'East Panel',
handler: toggleEastPanel,
enableToggle:true,
pressed:true
});
var mainTBar = new Ext.Toolbar({
items : [
{
text: 'WARP-IT'
}
]
});
function toggleEastPanel() {
if (eastPanel) {
if (eastPanelHidden == false) {
eastPanel.hide();
eastPanel.ownerCt.doLayout();
} else {
eastPanel.show();
eastPanel.ownerCt.doLayout();
eastPanel.expand();
}
eastPanelHidden = !eastPanelHidden;
}
}

var tabsTBar = new Ext.Toolbar({
items:[
{xtype: 'tbspacer'},
eastPanelBtn
]
})

function onTabChange(tabPanel, tab) {
switch (tab.id) {
case 'tab-1':
detail2.hide();
invDetailPanel.show();
break;
case 'tab-2':
invDetailPanel.hide();
detail2.show();
break;
}
}


var Tree_Category_Loader = new Ext.tree.TreeLoader({
dataUrl :"_class3.php",
});

var Tree_Category = new Ext.tree.TreePanel({
//title : 'Menu',
collapsible : false,
animCollapse : false,
border : true,
id : "DataTree",
el : "DataTree",
autoScroll : true,
animate : false,
enableDD : true,
containerScroll : true,
height : 100,
width : 300,
loader : Tree_Category_Loader
});

// SET the root node.
var Tree_Category_Root = new Ext.tree.AsyncTreeNode({
text : 'My Root Node',
draggable : false,
id : 1 // this IS the id of the startnode
});

Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

tab1 = {
id:'tab-1',
contentEl:'pnl-tab1',
title: 'Tab 1',
viewConfig: {layout:'fit'},
autoScroll:true
}

tab2 = {
id:'tab-2',
contentEl:'pnl-tab2',
title: 'Tab 2',
viewConfig: {layout:'fit'},
autoScroll:true
}

mainTabPanel = new Ext.TabPanel({
region: 'center',
margins: '0 0 0 0',
//tbar: tabsTBar,
activeTab: 0,
enableTabScroll:true,
items: [tab1,tab2]
});

invDetailPanel = new Ext.Panel({
contentEl:'pnl-detail1',
autoScroll:true,
border:false
});

detail2 = new Ext.Panel({
contentEl:'pnl-detail2',
autoScroll:true,
border:false
})

detailsPanel = new Ext.Panel({
region: 'south',
height:300,
margins: '0 0 0 0',
cmargins: '5 0 0 0',
title: 'Details',
split: true,
layout:'fit',
collapsible: true,
collapsemode: 'mini',
items:[invDetailPanel,detail2]
});



westPanel = new Ext.FormPanel({
region: 'west',
border:true,
title: 'West Panel',
margins: '40 0 0 0',
cmargins: '40 5 0 0',
bodyStyle:'padding:5px 5px 5px 5px',
autoScroll:true,
labelWidth:100,
collapsible:true,
split:true,
width:340,
minSize: 340,
maxSize: 400
});


centerPanel = new Ext.Panel({
margins: '40 0 0 0',
region:'center',
layout:'border',
border:false,
items:[mainTabPanel,detailsPanel]
});


// Render the tree.
Tree_Category.setRootNode(Tree_Category_Root);
Tree_Category.render();
Tree_Category_Root.expand();


eastPanel = new Ext.Panel({
id:'eastPanel',
title:'Menu',
contentEl:'pnl-detail3',
collapsible:true,
split:true,
margins: '40 0 0 0',
cmargins: '40 0 0 5',
region:'east',
layout:'fit',
width:300,
minSize: 100,
items : [Tree_Category]
});
containerPanel = {
header: false,
title: 'Menu',
border:false,
tbar: mainTBar,
layout:'border',
items:[
centerPanel,
eastPanel
]
}
viewport = new Ext.Viewport({
layout:'fit',
items:[
containerPanel
]
});

toggleEastPanel();

mainTabPanel.on('tabchange',onTabChange);
});

});
</script>
</head>
<body>

<div id="pnl-tab1">Tab 1</div>
<div id="pnl-tab2">Tab 2</div>
<div id="pnl-detail1">Detail 1</div>
<div id="pnl-detail2">Detail 2</div>
<div id="pnl-detail3">
<div id="DataTree" ></div>
</div>
</body>
</html>


Here is my PHP class:

<?php
include ("_db.php");
class tx_taw_models_ProjectCategoryListProxy{

/*
* Load tree node.
*/
function getTree($TYPO3_db,$TYPO3_db_username,$TYPO3_db_password,$TYPO3_db_host,$node){

$conn = mysql_connect($TYPO3_db_host, $TYPO3_db_username, $TYPO3_db_password);

mysql_select_db($TYPO3_db, $conn);

$nodes = $this->display_children($node);

mysql_close($conn);

print json_encode($nodes);
}

// http://www.sitepoint.com/article/hierarchical-data-database
// http://extjs.com/forum/archive/index.php/t-10082.html
// $parent is the parent of the children we want to see
// $level is increased when we go deeper into the tree,
// used to display a nice indented tree

function display_children($parent) {
// retrieve all children of $parent
//$sql = 'SELECT id_group, group_name, parent_id ' . 'FROM groups1 ' . 'WHERE parent_id = ' . $parent . '';
//echo $sql."<br>";
$result = mysql_query( 'SELECT id_group, group_name, parent_id ' .
'FROM groups1 ' .
'WHERE parent_id = ' . $parent . '');
// display each child
while ($row = mysql_fetch_array($result)) {
// Response parameters.
$path['text'] = html_entity_decode($row['group_name']);
$path['id'] = $row['id_group'];
// Check if node is a leaf or a folder.
//$sql = 'SELECT id_group, group_name, parent_id ' . 'FROM groups1 ' . 'WHERE parent_id = ' . $row['id_group'] . '';
//echo "<br>".$sql."<br>";
$cResult = mysql_query( 'SELECT id_group, group_name, parent_id ' .
'FROM groups1 ' .
'WHERE parent_id = ' . $parent . '');
$cCount = mysql_num_rows($cResult);
if($cCount > 0){
$path['leaf'] = false;
$path['cls'] = 'folder';
}else{
$path['leaf'] = true;
$path['cls'] = 'file';
}

// call this function again to display this
// child's children
$nodes[] = $path;
}

return $nodes;
}

}

$nodes = 0;

$treeDataModel = new tx_taw_models_ProjectCategoryListProxy;
$treeDataModel ->getTree('tig3rb0y_rmplus','tig3rb0y_rmplus','rmplus','localhost', $nodes);

?>