PDA

View Full Version : [SOLVED] Link text on hover for nodes in treepanel



ExtSwede
10 Sep 2010, 12:42 AM
Hi

Does anyone know how or if there is a way to show a descriptive text for links when you hover them, using a treepanel?
It should something like when you use a title in an A href tag.

I'm using notes in the background, så for creating the treenodes I'm using a notesview, and therefore the DominoViewLoader.

I've tried ToolTip and got it to work when I click the node, but not on mouseover or somehting eqauls to that. Does anyone have an idea what I can do?

Thanks in advance

Condor
10 Sep 2010, 12:47 AM
Have a look at the DataTip user extension (it can show dynamic tooltips for most data-bound Ext components).

ExtSwede
10 Sep 2010, 5:24 AM
Thanks, this might work. I'm just gonna have to ask how to get the attribute which is needed? Somehow I need to get the node which I have the mouse pointed at.. It's ok if I use the click listener to get the node, but I need it when hovering the node that the plugin is for. So I'm not quite sure how to get the attribute to use?

I'll paste some code that might help how the site has been configured.



init : function() {

dbExt = Session.Ext.ReplicaID;
db = Session.CurrentDatabase.WebFilePath;
dbQualityObj = Ext.get('QualityObjRepIDLS').dom.value;

Ext.BLANK_IMAGE_URL = '/'+dbExt + '/extjs/resources/images/default/s.gif';

var ext = Ext.get('Extern').dom.value;
var url = (ext == 'true') ? 'Extern.StartPage?OpenPage' : 'New.StartPage?OpenPage' ;

var viewport = new Ext.Viewport({
layout: 'border',
border: false,

items: [{
region: 'west',
contentEl: 'nav',
title: Session.CurrentDatabase.Title,
split: true,
collapsible: true,
autoScroll: true,
width: 210,
minSize: 100,
maxSize: 350,
margins: '5 0 5 5',
cmargins: '5 5 5 5',
layout: 'fit',
bodyStyle: 'background-image: url(\'outlineServicebil.jpg?OpenImageResource\')'
},{
region: 'center',
xtype: 'tabpanel',
id: 'tab-panel',
activeTab: 0,
margins: '5 5 5 0',
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,

items: [{
title: 'Startsida',
autoLoad: url,
bodyStyle: 'padding:10px',
autoScroll: true
}]
}]
});

var systemroutines = new Ext.tree.TreePanel({

renderTo : 'systemroutines',
autoHeight: true,
autoScroll: true,
animate: true,
enableDD: false,
containerScroll: true,
bodyStyle: 'border:0px; background: transparent;',
rootVisible: false,

plugins: new Ext.ux.DataTip({
tpl: '<div class="whatever">{id}</div>'
}),

loader: new Ext.ux.DominoViewLoader({
dataUrl: 'web.AreaPref.menu?ReadViewEntries'
}),

root: new Ext.tree.AsyncTreeNode({
text: 'Systemrutiner',
draggable: false,
id: 'systemroutines',
expanded: true
}),

listeners: {
'click' : { fn: Page.openRoutineEntry }
}

});

var systemsupport = new Ext.tree.TreePanel({

renderTo : 'systemsupport',
autoHeight: true,
autoScroll: true,
animate: true,
enableDD: false,
containerScroll: true,
bodyStyle: 'border:0px; background: transparent;',
rootVisible: false,

loader: new Ext.ux.DominoViewLoader({
dataUrl: 'web.MenuLinkPref.menu?ReadViewEntries&ExpandAll&Count=9999',
lazy: false
}),

root: new Ext.tree.AsyncTreeNode({
text: 'Systemsupport',
draggable: false,
id: 'systemsupport',
expanded: true
}),

listeners: {
'click' : { fn: Page.openSupportEntry }
}

});

var directlink = Ext.get('DirectLink').dom.value;

if( directlink != "" ) {
directlink = directlink.split("€");
systemroutines.selectPath( "/systemroutines/" + directlink[8] + "/" + directlink[1] );

if( directlink[2] == 'S' ) {
url = 'web.Sub1?OpenForm&AreaCode=' + directlink[0] + '&AreaType=' + directlink[2];
}
else if( directlink[2] == 'P' ) {
url = 'web.Sub2?OpenForm&AreaCode=' + directlink[0] + '&AreaType=' + directlink[2];
}
else if( directlink[2] == 'O' ) {
url = '/' + dbQualityObj + '/webSub2?OpenPage&AreaCode=' + directlink[0] + '&AreaType=' + directlink[2];
}

Ext.getCmp('tab-panel').add({
title: directlink[1],
closable: true,
id: 'tab-'+directlink[0],
layout: 'fit',
items: [ new Ext.ux.IFrameComponent({ id: 'iframe-'+directlink[0], url: url }) ]
}).show();
}

},

Condor
10 Sep 2010, 6:07 AM
DataTip already passes the node attributes to the template. So, in your case it should show a tip with the node id, because you used {id} in the template.

ExtSwede
10 Sep 2010, 6:14 AM
Ok, thanks for the answer, then I'll just have to find out why no tip is showing :P

ExtSwede
16 Sep 2010, 1:50 AM
Ok, so I found that this.on('beforeshow', beforeTreeTipShow); won't trigger. I've tried adding a listener for beforeshow. Don't know if this is the correct way, never used beforeshow?



listeners: {
'beforeshow': {
plugins: new Ext.ux.DataTip({
tpl: '<div class="whatever">{LinkHelpText}</div>',
})
}
}


Or if it could be my attributeName isn't correct.. LinkHelpText comes from the Xml from wich the tree is built up by.

ExtSwede
29 Sep 2010, 10:57 PM
Ok, so now I have manaed to get the dataTip working, needed to upgrade the Ext version. Now I'm using 3.1.

Still have a question if anyone would know. Some nodes won't have values and at the moment it only shows an empty datatip. I would like to hide them if there is no value (if attribute is undefined). Haven't found a way to do that is working. Anyone got an idea?

ExtSwede
3 Oct 2010, 11:10 PM
Still hasn't found an answer to my question. How I should handle empty attributes whn using datatip in my treepanel. At the moment it shows a small empty box and I wish to hide it when there is no value in it. I belive empty values in json comes as undefined, can I use beforeshow listener to see if the value is undefined and hide the tip? And in that case, how should I do that?

Animal
3 Oct 2010, 11:15 PM
Use your own beforeshow listener on it which can return false to veto the show.

ExtSwede
4 Oct 2010, 12:32 AM
Thanks Animal, we have been trying to do our own like this:



plugins: new Ext.ux.DataTip({
listeners: ({
'beforeshow': function(tip) {
var e = Ext.fly(tip.triggerElement).findParent('div.x-tree-node-el', null, true),
node = e ? tip.host.getNodeById(e.getAttribute('tree-node-id', 'ext')) : null;
if(node.attributes.LinkHelpText!=undefined && node.attributes.LinkHelpText!=''){
var data = node.attributes;
if (tip.rendered) {
tip.update(data);
} else {
if (Ext.isString(data)) {
tip.html = data;
} else {
tip.data = data;
}
}
} else {
return false;
}
}
}),
tpl : new Ext.XTemplate(
'<div class="whatever">{LinkHelpText}</div>'
)
}),


However, when using return false we get this.boyd is undefined error, why is that?



this.body is undefined
doAutoWidth()(0)ext-all-...eResource (line 28584)
showAt()(67,142 0=67 1=142)ext-all-...eResource (line 28573)
showAt()(67,142 0=67 1=142)ext-all-...eResource (line 28950)
show()()ext-all-...eResource (line 28935)
apply()()ext-base...eResource (line 7)

var bw = this.body.getTextWidth();

Animal
4 Oct 2010, 2:04 AM
Configure it with



renderTo: document.body


So that it renders itself immediately, and so then has a body which you can then access before it's shown.

By default it renders itself when it needs to: When shown.

ExtSwede
4 Oct 2010, 3:18 AM
thanks, that works perfectly