PDA

View Full Version : add a toolTip on an Ext.tree.AsyncTreeNode



flamant
27 Aug 2010, 1:17 AM
Hi,
is it possible to add a toolTip on an Ext.tree.AsyncTreeNode ?
I tried to add an attribute tooltip but it doen't work

Thank you for your answers

Animal
27 Aug 2010, 4:17 AM
Use the DataTip plugin.

flamant
27 Aug 2010, 7:35 AM
Thank you for your answer,

considering DataTip plugin, I found your code on the forum



/**
* @class Ext.ux.DataTip
* @extends Ext.ToolTip.
* <p>This plugin implements automatic tooltip generation for an arbitrary number of child nodes <i>within</i> a Component.</p>
* <p>This plugin is applied to a high level Component, which contains repeating elements, and depending on the host Component type,
* it automatically selects a {@link Ext.ToolTip#delegate delegate} so that it appears when the mouse enters a sub-element.</p>
* <p>When applied to a GridPanel, this ToolTip appears when over a row, and the Record's data is applied
* using this object's {@link Ext.Component#tpl tpl} template.</p>
* <p>When applied to a DataView, this ToolTip appears when over a view node, and the Record's data is applied
* using this object's {@link Ext.Component#tpl tpl} template.</p>
* <p>When applied to a TreePanel, this ToolTip appears when over a tree node, and the Node's {@link Ext.tree.TreeNode#attributes attributes} are applied
* using this object's {@link Ext.Component#tpl tpl} template.</p>
* <p>When applied to a FormPanel, this ToolTip appears when over a Field, and the Field's <code>tooltip</code> property is used is applied
* using this object's {@link Ext.Component#tpl tpl} template, or if it is a string, used as HTML content.</p>
* <p>If more complex logic is needed to determine content, then the {@link Ext.Component#beforeshow beforeshow} event may be used.<p>
* <p>This class also publishes a <b><code>beforeshowtip</code></b> event through its host Component. The <i>host Component</i> fires the
* <b><code>beforeshowtip</code></b> event.
*/
Ext.ux.DataTip = Ext.extend(Ext.ToolTip, (function() {

// Target the body (if the host is a Panel), or, if there is no body, the main Element.
function onHostRender() {
var e = this.body || this.el;
if (this.dataTip.renderToTarget) {
this.dataTip.render(e);
}
this.dataTip.initTarget(e);
}

function updateTip(tip, data) {
if (tip.rendered) {
tip.update(data);
} else {
if (Ext.isString(data)) {
tip.html = data;
} else {
tip.data = data;
}
}
}

function beforeTreeTipShow(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){
updateTip(tip, node.attributes);
} else {
return false;
}
}

function beforeGridTipShow(tip) {
var rec = this.host.getStore().getAt(this.host.getView().findRowIndex(tip.triggerElement));
if (rec){
updateTip(tip, rec.data);
} else {
return false;
}
}

function beforeViewTipShow(tip) {
var rec = this.host.getRecord(tip.triggerElement);
if (rec){
updateTip(tip, rec.data);
} else {
return false;
}
}

function beforeFormTipShow(tip) {
var el = Ext.fly(tip.triggerElement).child('input,textarea'),
field = el ? this.host.getForm().findField(el.id) : null;
if (field && (field.tooltip || tip.tpl)){
updateTip(tip, field.tooltip || field);
} else {
return false;
}
}

function beforeComboTipShow(tip) {
var rec = this.host.store.getAt(this.host.selectedIndex);
if (rec){
updateTip(tip, rec.data);
} else {
return false;
}
}

return {
init: function(host) {
host.dataTip = this;
this.host = host;
if (host instanceof Ext.tree.TreePanel) {
this.delegate = this.delegate || 'div.x-tree-node-el';
this.on('beforeshow', beforeTreeTipShow);
} else if (host instanceof Ext.grid.GridPanel) {
this.delegate = this.delegate || host.getView().rowSelector;
this.on('beforeshow', beforeGridTipShow);
} else if (host instanceof Ext.DataView) {
this.delegate = this.delegate || host.itemSelector;
this.on('beforeshow', beforeViewTipShow);
} else if (host instanceof Ext.FormPanel) {
this.delegate = 'div.x-form-item';
this.on('beforeshow', beforeFormTipShow);
} else if (host instanceof Ext.form.ComboBox) {
this.delegate = this.delegate || host.itemSelector;
this.on('beforeshow', beforeComboTipShow);
}
if (host.rendered) {
onHostRender.call(host);
} else {
host.onRender = host.onRender.createSequence(onHostRender);
}
}
};
})());


I added it and I used it this way in my code (I have 2 attributes, "id" and "text") :



new Ext.tree.TreePanel({
id: 'subjectTreeView',
name: 'subjectTreeView',
title: '<spring:message code="application.tab.subjects"/>',
useArrows: true,
autoScroll: true,
containerScroll: true,
animate: true,
enableDD: true,
ddScroll: true,
border: false,
flex: 1,
plugins: new Ext.ux.DataTip({
tpl: '<div class="whatever">{id} {text}</div>'
}),
loader: new Ext.tree.TreeLoader({
dataUrl: './getSubjectsTreeNodes.htm?targetDivId=dataEntryContent'
}),
root: {
nodeType: 'async',
text: '',
draggable: false,
id: 'subjectRoot',
expand: true,
subEntityName: 'Center',
iconCls: 'studyNode',
create: true,
allowedActions: {
"create": true
}
},
..........................
..........................


But nothing appears when I hover a node. Am I using it a wrong way.

Furthermore, I would like to display a tooltip only on some nodes and not all.

Or is there a simpler method to implement that functionnality ?

Animal
27 Aug 2010, 9:26 AM
That should work. You'll have to debug.

Configure it with a beforeshow listener

flamant
28 Aug 2010, 7:55 AM
Thank you for your answer, I will proceed further