PDA

View Full Version : treePanel + treeLoader, help needed with quicktips & templates



burn
18 Apr 2007, 10:17 AM
Hello guys, can anyone enlighten me on how to apply a qtip template to a treePanel generated via treeloader?

My code:



var fileTree = function(){
var filesMenu = new Ext.menu.Menu('files-context-menu');

filesMenu.add(
new Ext.menu.CheckItem({text: 'Delete'})
);

return {
init : function() {
// shorthand
var Tree = Ext.tree;

Ext.QuickTips.init();

var tree = new Tree.TreePanel('files-tree', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'get-files.php?id=<?=$_GET['id']?>'}),
enableDD: true,
rootVisible: true,
containerScroll: true
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Pictures',
draggable:false,
id:'pictures'
});
tree.setRootNode(root);

// render the tree
tree.render();
root.expand();

tree.on('contextmenu', this.menuShow, this);
},

menuShow : function( node ){
// alert ( "menuShow\n" + node.ui.getEl() );
filesMenu.show(node.ui.getAnchor());
}
};
}();

Ext.EventManager.onDocumentReady(fileTree.init, fileTree, true);

As the APIs explain, treePanel doesn't have a qtip option.. :( Any help appreciated

burn
18 Apr 2007, 3:11 PM
5 hours later.. digging and finding nothing, in the .js files provided by the examples in which Jack was doing what I wanted to do, I decided that the code had to be somewhere else. Thanks to Firebug I managed to get what I wanted.

Here's the solution: for those who like me didn't know that treeLoader can get all the config options from the array of data that is sent from the server side script (json/xml). Here's an example response, single node, valid for the treeLoader:


[{"text":"node name","id":"dom id","leaf":true,"qtip":"qtip text","qtipTitle":"qtip title","cls":"file", "icon":"custom icon (deprecated)", "iconCls":"css background icon"}]

I knew Jack wouldn't let me down :) you da man! The more I dig Ext the more exciting it gets, and rarest of things.. does it in a way that leaves me completely satisfied.

Just one question: why the API reference for treeLoader doesn't mention this? Am I reading the docs wrong or mine was actually the only way to know what treeLoader expected (could process) in the JSON string? Besides going and reading the whole treeLoader class, which in my case is useless.. given my lack of oo JS knowledge.

I entirely depend on examples to figure these things out.. I hope it gets better with time.. right now using ext makes me feel, most of the times, helpless.