Help needed with TreeNode and qtip

[imoise]

I am trying to make a simple tree with some leafs and i'm trying to get each leaf disply a qtip on mouse over. so if i do this

 for (var i=0;i<vItems;i++){
		var nodeCt=content[i];
		//console.info(content);
		var quickTip=new Ext.QuickTip({
		    showDelay:200,
		    title:"ceva",
		    width:50,
		    height:50,
		    
		});
		var node=new Ext.tree.TreeNode({
		    text:nodeCt.data.title,
		    href:nodeCt.data.link,
		    qtip:quickTip,
		    iconCls:"rss-feed"
		});
		    root.appendChild(node);
	    }

i get the qtip as a window 50x50 that says [Object object] and not the title or text or something , and if i use the qtipCfg option and i pass it the same config options i get this hugeeeeeeeeee eror

B has no properties
QuickTips()ext-all.js (line 98)
TreeNodeUI(true)ext-all.js (line 104)
TreeNode(true)ext-all.js (line 102)
TreeNode(undefined)ext-all.js (line 102)
TreeNode(false, false, undefined)ext-all.js (line 102)
TreeNode(undefined)ext-all.js (line 102)
initComponent()ext-all.js (line 99)
Component(Object dom=div#ext-gen356.x-panel-body id=ext-gen356, undefined)ext-all.js (line 58)
initComponent()ext-all.js (line 64)
ContainerLayout([Tree ext-comp-1093] initialConfig=Object animate=true loader=Object, 0, Object dom=div#ext-gen356.x-panel-body id=ext-gen356)ext-all.js (line 65)
ContainerLayout(Object initialConfig=Object title=BBC Sport vItems=5, Object dom=div#ext-gen356.x-panel-body id=ext-gen356)ext-all.js (line 65)
ContainerLayout(Object initialConfig=Object title=BBC Sport vItems=5, Object dom=div#ext-gen356.x-panel-body id=ext-gen356)ext-all.js (line 65)
ContainerLayout()ext-all.js (line 65)
initComponent()ext-all.js (line 64)
(no name)(Object data=[15] baseParams=Object paramNames=Object)Portlet.js (line 41)
Observable()ext-all.js (line 12)
Observable()ext-all.js (line 12)
Store(Object success=true records=[15] totalRecords=15, Object, true)ext-all.js (line 43)
HttpProxy(Object params=Object request=Object reader=Object, true, Object tId=14 status=200 statusText=OK)ext-all.js (line 50)
apply(function(), Object events=Object conn=Object useAjax=false, [Object params=Object request=Object reader=Object, true, Object tId=14 status=200 statusText=OK], undefined)ext-yui-adapter.j... (line 9)
Connection(Object tId=14 status=200 statusText=OK)ext-all.js (line 17)
handleTransactionResponse(Object conn=XMLHttpRequest tId=14, Object scope=Object argument=Object timeout=30000, undefined)ext-base.js (line 965)
(no name)()

so is anyone out there who knows how to enter a piece of text in the qtip? that's all o need!!!

[Condor]

qtip should be a string (e.g. qtip:'ceva').

qtipCfg should work. Are you using:

qtipCfg: {
  showDelay:200,
  title:"ceva",
  width:50,
  height:50
}

(remove the trailing comma!)

[imoise]

thanx condor it seems that was the problem with qtip ..but it seems the content is too large and i need to configure the quicktip so that i can display it's content in an acceptable manner, so if i configurate a QuickTip with height and width where should i put the text that it's actually going to be displayed as i see that QuickTip hasn't got a text config option?

[Condor]

The text config option you are looking for is 'qtip', e.g.

qtipCfg: {
  showDelay:200,
  title:'ceva',
  qtip:'some text',
  width:50,
  height:50
}

[imoise]

it still doesn't work and i can't figure out why..

for (var i=0;i<vItems;i++){
		var nodeCt=content[i];
		//console.info(content);
		var quickTip=new Ext.QuickTip({
		    showDelay:200,
		    qtip:nodeCt.data.content,
		    width:50,
		    height:50,
		    autoHide:true,
		    bufferResize:true
		});
		var node=new Ext.tree.TreeNode({
		    text:nodeCt.data.title,
		    href:nodeCt.data.link,
		    qtipCfg:{
			showDelay:200,
			qtip:nodeCt.data.content,
			width:50,
			height:50,
			autoHide:true,
			bufferResize:true
		    },
		    iconCls:"rss-feed",
		});
		root.appendChild(node);
	    }

this code is causing the same error i mentioned above in ext-all js line 98..anyone? is there a problem with the text? the text is actually the description of a news from a rss channel..this tree is a layout i have chosen to render a rss and the qtip should be the short description..

[Condor]

1. Remove var quickTip=new Ext.QuickTip({...});
2. Did you call Ext.QuickTips.enable();
3. If you still get the error, could you post the callstack when using ext-all-debug.js ?

[imoise]

done, this is my code now:

	buildContentTree:function(pid){
	    var theThis=this.allPortlets[this.getIndexById(pid)];
	    var content=theThis.content;
	    // console.info(theThis);
	    var root=new Ext.tree.TreeNode();
	    if (content.length<theThis.visibleItems) 
		var vItems=content.length;
	    else vItems=theThis.visibleItems;
	    for (var i=0;i<vItems;i++){
		var nodeCt=content[i];
		//console.info(content);
		var node=new Ext.tree.TreeNode({
		    text:nodeCt.data.title,
		    href:nodeCt.data.link,
		    qtipCfg:{
			showDelay:200,
			qtip:nodeCt.data.content,
			width:50,
			height:50,
			autoHide:true,
			bufferResize:true
		    },
		    iconCls:"rss-feed",
		});
		root.appendChild(node);
	    }
	    var tree=new Ext.tree.TreePanel({
		animate:true,
		loader: new Ext.tree.TreeLoader(),
		rootVisible:false,
		expanded:true,
		lines:false,
		border:false,
		singleExpand:true,
		containerScroll:true
	    });
	    tree.setRootNode(root);
	    // console.info(root);
	    return tree;
	}

in fact this is the entire function that builds the tree based on a certain id that points to the data with which i am suposed to build it. i have called Ext.QuickTips.enable() at the very begining of my code, and i replaced the ext-all with
ext-all-debug and i get this error

tip has no properties
register()ext-all-debug.js (line 21880)
render(true)ext-all-debug.js (line 23421)
render(true)ext-all-debug.js (line 22922)
renderChildren(undefined)ext-all-debug.js (line 22904)
expand(false, false, undefined)ext-all-debug.js (line 22766)
render(undefined)ext-all-debug.js (line 22929)
afterRender()ext-all-debug.js (line 22186)
render(Object dom=div#ext-gen252.x-panel-body id=ext-gen252, undefined)ext-all-debug.js (line 12309)
render()ext-all-debug.js (line 13853)
renderItem([Tree ext-comp-1039] initialConfig=Object animate=true loader=Object, 0, Object dom=div#ext-gen252.x-panel-body id=ext-gen252)ext-all-debug.js (line 14145)
renderAll(Object initialConfig=Object, Object dom=div#ext-gen252.x-panel-body id=ext-gen252)ext-all-debug.js (line 14135)
onLayout(Object initialConfig=Object, Object dom=div#ext-gen252.x-panel-body id=ext-gen252)ext-all-debug.js (line 14122)
layout()ext-all-debug.js (line 14117)
doLayout()ext-all-debug.js (line 13995)
(no name)(Object data=[15] baseParams=Object paramNames=Object)Portlet.js (line 41)
fire()ext-all-debug.js (line 1504)
fireEvent()ext-all-debug.js (line 1201)
loadRecords(Object success=true records=[15] totalRecords=15, Object, true)ext-all-debug.js (line 10720)
loadResponse(Object params=Object request=Object reader=Object, true, Object tId=8 status=200 statusText=OK)ext-all-debug.js (line 11199)
apply(function(), Object events=Object conn=Object useAjax=false, [Object params=Object request=Object reader=Object, true, Object tId=8 status=200 statusText=OK], undefined)ext-yui-adapter.j... (line 9)
handleResponse(Object tId=8 status=200 statusText=OK)ext-all-debug.js (line 5207)
handleTransactionResponse(Object conn=XMLHttpRequest tId=8, Object scope=Object argument=Object timeout=30000, undefined)ext-base.js (line 965)
(no name)()ext-base.js (line 925)
[Break on this error] tip.register.apply(tip, arguments);

...does this make any sense to you?

[Condor]

Oops... that should be:

Ext.QuickTips.init();

[imoise]

it's done: it seems that i missinterpreted something. The correct way or at least how it works for me is this one:

var node=new Ext.tree.TreeNode({
		    text:nodeCt.data.title,
		    href:nodeCt.data.link,
		    qtip:nodeCt.data.link,
		    qtipCfg:new Ext.QuickTip({
			showDelay:20,
			width:200,
			height:200,
			autoHide:true,
			bufferResize:true
		    }),
		    iconCls:"rss-feed",
		});

as you can see the qtip and qtipCfg is used simultaneous, qtip being the text to put there and the qtipCfg configures the layout of the QuickTip box. Thanx a lot Condor