1. #1
    Sencha User imoise's Avatar
    Join Date
    Sep 2007
    Location
    Bucharest,Romania
    Posts
    42
    Vote Rating
    0
    imoise is on a distinguished road

      0  

    Exclamation Help needed with TreeNode and qtip

    Help needed with TreeNode and qtip


    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
    Code:
     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
    Code:
    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!!!
    Do not underestimate the power under my imbecility...

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

    qtipCfg should work. Are you using:

    Code:
    qtipCfg: {
      showDelay:200,
      title:"ceva",
      width:50,
      height:50
    }
    (remove the trailing comma!)

  3. #3
    Sencha User imoise's Avatar
    Join Date
    Sep 2007
    Location
    Bucharest,Romania
    Posts
    42
    Vote Rating
    0
    imoise is on a distinguished road

      0  

    Default


    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?
    Do not underestimate the power under my imbecility...

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

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

  5. #5
    Sencha User imoise's Avatar
    Join Date
    Sep 2007
    Location
    Bucharest,Romania
    Posts
    42
    Vote Rating
    0
    imoise is on a distinguished road

      0  

    Default


    it still doesn't work and i can't figure out why..
    Code:
    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..
    Do not underestimate the power under my imbecility...

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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 ?

  7. #7
    Sencha User imoise's Avatar
    Join Date
    Sep 2007
    Location
    Bucharest,Romania
    Posts
    42
    Vote Rating
    0
    imoise is on a distinguished road

      0  

    Default


    done, this is my code now:
    Code:
    	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
    Code:
    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?
    Do not underestimate the power under my imbecility...

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Oops... that should be:

    Code:
    Ext.QuickTips.init();

  9. #9
    Sencha User imoise's Avatar
    Join Date
    Sep 2007
    Location
    Bucharest,Romania
    Posts
    42
    Vote Rating
    0
    imoise is on a distinguished road

      0  

    Default


    it's done: it seems that i missinterpreted something. The correct way or at least how it works for me is this one:
    Code:
    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
    Do not underestimate the power under my imbecility...

Thread Participants: 1