I am able to get the right events by overriding TreeNodeUI. My prooblem now is that the hover icon class is not removed from the treenode in one corner case.
Steps to Reproduce:
1. Expand root node
2. Hover over Node2 and move mouse to the right so it's over the icon
3. Move mouse up and notice Node2 AND Node1 are highlighted.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Hover.aspx.cs" Inherits="MyExtNetSandbox.Hover" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script runat="server">
protected void Page_Load(object sender, EventArgs e) {
if (!(this.IsPostBack)) {
this.ResourceManager1.RegisterIcon(Ext.Net.Icon.Information);
}
}
</script>
<head runat="server">
<title></title>
<style type="text/css">
.x-hoveractions-outer
{
float:right;
}
.x-hoveractions-img
{
height: 16px;
width: 16px;
cursor: hand;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
Ext.override(Ext.tree.TreeNodeUI, {
onOver: function(e) {
this.fireEvent('onnodeover', this.node);
this.addClass('x-tree-node-over');
},
onOut: function(e) {
this.fireEvent('onnodeout', this.node);
this.removeClass('x-tree-node-over');
}
});
Ext.ux.HoverActions = Ext.extend(Ext.util.Observable, {
defaults: {
actions: []
},
constructor: function(config) {
Ext.apply(this, config || {}, this.defaults);
this.addEvents('action');
Ext.ux.HoverActions.superclass.constructor.call(this);
},
init: function(tree) {
this.tree = tree;
tree.on({
scope: this,
onnodeover: this.onNodeOver,
onnodeout: this.onNodeOut,
destroy: this.destroy
});
this.createEl();
},
destroy: function() {
document.removeChild(this.el);
},
createEl: function() {
var tpl = new Ext.XTemplate(
'<div class="x-hoveractions-outer">',
'<tpl for=".">',
'<img class="{iconCls} x-hoveractions-img" title="{name}" />',
'</tpl>',
'</div>'
);
this.el = tpl.append(document.body, this.actions);
Ext.fly(this.el).hide();
},
onNodeOver: function(node, e) {
var nodeUI = node.getUI();
var nodeEl = new Ext.Element(nodeUI.getIconEl().parentNode);
nodeEl.insertFirst(this.el);
Ext.fly(this.el).show();
},
onNodeOut: function(node, e) {
Ext.fly(this.el).hide();
document.body.appendChild(this.el);
}
});
</script>
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Slate" ScriptMode="Debug">
</ext:ResourceManager>
<ext:TreePanel ID="tree" runat="server" Title="Test" Height="400" Width="400">
<Root>
<ext:TreeNode Text="Test">
<Nodes>
<ext:TreeNode Text="Node1">
</ext:TreeNode>
<ext:TreeNode Text="Node2">
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<Plugins>
<ext:GenericPlugin runat="server" InstanceName="Ext.ux.HoverActions">
<CustomConfig>
<ext:ConfigItem Name="actions" Value="[{id: 'btnInfo', name: 'Info', iconCls: 'icon-information'}]">
</ext:ConfigItem>
</CustomConfig>
</ext:GenericPlugin>
</Plugins>
</ext:TreePanel>
</form>
</body>
</html>
Originally Posted by jchau
