PDA

View Full Version : Help Customizing Ext.tree.TreePanel



Srinivas B
30 May 2007, 6:28 AM
Hi All,
I am new to Ext.I wanted to create one TreePanel like below ,

http://61.95.200.169:100/images/ext-help/tree1.jpg

I just took one example from Ext 1.0.1 distribution and implemented a sample Tree.I got one problem .. (:|
I added the nodes to the root node using the json data as below,


[{"text" : "Inbox", "id" : 1, "leaf" : false,"allowDrag":false, "cls" : "folder", "children" : [
{"text" : "inbox_child1", "id" : 2, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "3", "leaf" : false, "cls" : "folder"},
{"text" : "Invoice", "id" : "4", "leaf" : false, "cls" : "folder"},
{"text" : "MSRP", "id" : "5", "leaf" : false, "cls" : "folder"}
]
}
},
{"text" : "Sent Items", "id" : 1, "leaf" : false,"allowDrag":false, "cls" : "folder", "children" : [
{"text" : "inbox_child1", "id" : 2, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "3", "leaf" : false, "cls" : "folder"},
{"text" : "Invoice", "id" : "4", "leaf" : false, "cls" : "folder"},
{"text" : "MSRP", "id" : "5", "leaf" : false, "cls" : "folder"}
]
}
}]

But the problem is if there is no child nodes for the node then also before the node its showing "+" symbol to allow to expand it when i tried to click on "+" symbol it is show the tree as below ....

http://61.95.200.169:100/images/ext-help/tree-faulty.JPG

How can i remove this + symbol when there is no child nodes to make it work as i intended?:-/

I am adding the code that i wrote,,


init:function( jsondata ){
//logDebug('inside VisTree init method .... jsondata : ' + jsondata );
var Tree = Ext.tree;
var tree = new Tree.TreePanel('tree-div', {
animate:false,
enableDD:true,
loader: new Tree.TreeLoader(),
containerScroll: true,
ddGroup: 'WebproDDGroup',
rootVisible:false
});

//This is the handle to which where we can alow or deny the dropping the content into the node.11/05/07

tree.on('nodedragover' , handleDropControl );
function handleDropControl(e){
//logDebug('test :::: e : ' + e );
if( e.target.text == 'Invoice'){
e.cancel = true;
}
if( e.target.text == 'Inbox'){
e.cancel = true;
}
}
//tree.on('nodedrop' , processDrop ); // This is the bug in yui-ext 1.0.1 docs instead we need to use beforenodedrop to
// process the data to insert in to the node
tree.on('beforenodedrop' , processDrop );
/**
* In this function we need to write the code to handle when the PG is put into the folder dragging from grid.
* @param {Object} e
*/
function processDrop(e){
if( false ){
logDebug('tree : ' + e.tree + ',target :'+e.target + ',data : ' + e.data +
',point :'+ e.point + ',source :'+e.source + ',rawEvent :' + e.rawEvent + ',dropNode : ' + e.dropNode );
logDebug('grid id : ' + e.data.grid.id );
logDebug('selections : ' + e.data.grid.getSelectionModel().getSelections());
logDebug('first email : ' + e.data.grid.getSelectionModel().getSelections()[0].get('email'));
logDebug('target node text : ' + e.target.text);
}
if( e.data.grid ){ // If the source is grid.
var selRows = e.data.grid.getSelectionModel().getSelections();
for( var i = 0 ; i < selRows.length ; i++) {
e.target.appendChild(new Ext.tree.TreeNode({
text: '"' + selRows[i].get( 'email' ) +'"' ,
id:i,
//data: selRows[i],
leaf:false,
cls: 'folder',
allowDrag:true
//qtip: data.qtip
}));
e.data.grid.getDataSource().remove( selRows[i] );
}
}
else{
//logDebug('data source: ' + e.source );
}
}
tree.on( 'dragdrop' , handleSelfDrop );
function handleSelfDrop( tree , node , e ){
//logDebug( 'tree : ' + tree +',node : ' + node +',e : ' + e );
}
root = new Tree.TreeNode({
text: 'Webpro',
allowDrag:false,
allowDrop:false
});
tree.setRootNode(root);


for(var i = 0, len = jsondata.length; i < len; i++) {
root.appendChild(tree.getLoader().createNode(jsondata[i]));
}
tree.render();
root.expand(false,false);
//adding inline editor
// add an inline editor for the nodes
var ge = new Ext.Editor(new Ext.form.TextField({
allowBlank:false,
blankText:'A name is required',
width:100
}), {
parentEl: tree.getEl(),
alignment:'tl-tl'
});
ge.on('complete', function(e, value){
ge.node.setText(value);
});
// listen for a click on a node that is already selected
// and start editing. return false to cancel the default click action.
tree.on('beforeclick', function(node){
if(tree.getSelectionModel().isSelected(node)){
ge.node = node;
if(node.text != 'Inbox' && node.text != 'Sent Items' && node.text != 'Deleted Items' ){
ge.startEdit(node.ui.getAnchor(), node.text);
}
return false;
}
});

//Ext.EventManager.addListener(window,"load",assignContextmenu, assignContextmenu, true);
//adding context menu to tree nodes .

var menuC = new Ext.menu.Menu('mainContext');
var createItem = new Ext.menu.Item({text: 'Create'});
var deleteItem = new Ext.menu.Item({text: 'Delete'});

menuC.add( createItem,deleteItem );
function showMenu( node , e ){
//alert ( "menuShow\n" + node.id + ',e : ' + e + ', xy:' + e.getXY());
if( node.id == 1 ){
deleteItem.disable() ;
}else if( node.id == 100 ){
deleteItem.disable() ;
}else if(node.id == 10000 ){
deleteItem.disable() ;
}
else{
deleteItem.enable();
}
menuC.show(node.ui.getEl());
tree.getSelectionModel().select( node );
menuC.showAt( e.getXY() );
}
function menuClicked( item , e ){
if( false ){
logDebug('menu clicked ... item : ' + item + ',e : ' + e );
logDebug('node : ' + tree.getSelectionModel().getSelectedNode().text +',item name : '+ item.text );
}
var targetNode = tree.getSelectionModel().getSelectedNode();
if( item.text == 'Create'){
var newNode = [{"text" : "New Folder", "id" : 1111, "leaf" : false,"allowDrag":false}];
targetNode.expand(false);
targetNode.appendChild( tree.getLoader().createNode( newNode[0] )).select();
}else if(item.text == 'Delete'){
targetNode.parentNode.removeChild( targetNode );
}
}
menuC.on('itemclick' , menuClicked );
tree.on('contextmenu', showMenu , tree );
}


Can anybody assist me with sample code ,how to proceed .Help would be really appreciated.

Thanks in Advance,
Srinivas.

jsakalos
30 May 2007, 9:45 AM
In this example http://extjs.com/deploy/ext/examples/tree/organizer.html it is done exactly as you want it. Look how they've done it.

Srinivas B
31 May 2007, 2:40 AM
Hi jsakalos,
Thanks for reply.i checked orgenizer.js code and tested with that .That is working fine for me .But for there are two issues ,

1. I checked organizer.js file they used Ext.tree.TreeNode.I checked with the same .it is working fine.but when i am loading the data from Ext.tree.TreeLoader i found the createNode method in that like below,

createNode : function(attr){
if(this.applyLoader !== false){
attr.loader = this;
}
if(typeof attr.uiProvider == 'string'){
attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
}
return(attr.leaf ?
new Ext.tree.TreeNode(attr) :
new Ext.tree.AsyncTreeNode(attr));
}

here he is giving like if attr.leaf == true then only he is creating node with TreeNode otherwise with AsyncTreeNode.since in my application i am using always folders ,so i am passing leaf:false always in json data .I found the problem of + symbol for Nodes without child elements are coming only when we created the nodes with AsynTreeNode.Can u help me in this issue how to make the nodes from TreeNode when loading from JSON data.

2. I want to remove the dotted line symbols before each node icon .What can i do to make this work?

Thanks.
Srinivas

jack.slocum
31 May 2007, 3:38 AM
1. You can set it to never have the plus by telling it that it has no children to load in the node attributes:

children:[], // no children
expanded:true // remove the +

2. Add lines:false to your tree config.

Srinivas B
31 May 2007, 10:01 PM
Thanks Jack ... It works fine.I have couple of questions again.

1. I want to increase the distance between parent node and its immediate child node after expanding the parentNode ?.. I will give u clear image that what i mean.

2.How can i set the Add link at the end of the layout boundary corresponding to the Node ? ie,

if there is Inbox Node is there i want add "Add" link for this node .That link should always persist
at the end of the TreePanel's ContentPanel Layout Boundary.

3. I which css class i need to edit to show the icon clearly?


Kindly check the attachment requirement.jpg file.




Thanks,
Srinivas

tryanDLS
1 Jun 2007, 7:11 AM
Look at the rendered HTML in firebug to determine what css classes you need to modify.

Srinivas B
3 Jun 2007, 10:11 PM
Thanks tryanDLS,I got the solution from Firebug.

Srinivas