Sep 26, 2011, 4:09 PM
Here is the last version which works under FF (there are some minor changes as well).
Example
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.ResourceManager1.RegisterIcon(Ext.Net.Icon.Information);
this.ResourceManager1.RegisterIcon(Ext.Net.Icon.Add);
}
}
</script>
<!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">
<head runat="server">
<title>Ext.Net Example</title>
<style type="text/css">
.x-hoveractions-outer {
float: right;
}
.x-hoveractions-img {
height: 16px;
width: 16px;
cursor: hand;
}
</style>
<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.tree.TreeNodeUI.prototype.onOver = Ext.tree.TreeNodeUI.prototype.onOver.createSequence(function (e) {
var tree = this.node.getOwnerTree();
if (tree.allowNodeOver) {
tree.fireEvent('nodeover', this.node);
tree.allowNodeOver = false;
}
});
Ext.tree.TreeNodeUI.prototype.onOut = Ext.tree.TreeNodeUI.prototype.onOut.createSequence(function (e) {
var tree = this.node.getOwnerTree();
tree.fireEvent('nodeout', this.node);
tree.allowNodeOver = true;
});
Ext.ux.HoverActions = Ext.extend(Ext.util.Observable, {
defaults : {
actions : []
},
constructor : function (config) {
Ext.apply(this, config || {}, this.defaults);
Ext.ux.HoverActions.superclass.constructor.call(this);
},
init : function (tree) {
this.tree = tree;
tree.addEvents('nodeover', 'nodeout');
tree.on({
scope : this,
nodeover : this.onNodeOver,
nodeout : this.onNodeOut,
destroy : this.destroy
});
this.createElement();
},
destroy : function () {
this.extElement.remove();
},
createElement : function () {
var tpl = new Ext.XTemplate(
'<div class="x-hoveractions-outer">',
'<tpl for=".">',
'<img id="{id}" src="{[Ext.BLANK_IMAGE_URL]}" class="{iconCls} x-hoveractions-img" title="{name}" />',
'</tpl>',
'</div>'
);
this.element = tpl.append(document.body, this.actions);
this.extElement = Ext.get(this.element);
this.extElement.hide();
this.extElement.on("click", this.onClick, this);
},
onNodeOver : function (node, e) {
var nodeEl = Ext.get(node.ui.getEl());
nodeEl.insertFirst(this.element);
this.extElement.show();
this.currentNode = node;
},
onNodeOut : function (node, e) {
this.extElement.hide();
},
onClick : function (e) {
var node = this.currentNode,
actionId = Ext.fly(e.getTarget()).getAttribute("id");
Ext.each(this.actions, function (action) {
if (action.id === actionId) {
action.handler(node);
}
});
}
});
var actions = [{
id : 'btnInfo',
name : 'Information Icon',
iconCls : 'icon-information',
handler : function (node) {
alert(String.format("Clicked the Info button for the node with id : {0}", node.attributes.id));
}
}, {
id : 'btnAdd',
name : 'Add Button',
iconCls : 'icon-add',
handler : function (node) {
alert(String.format("Clicked the Add button for the node with id : {0}", node.attributes.id));
}
}];
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TreePanel
runat="server"
Height="400"
Width="400"
AllowNodeOver="true">
<Root>
<ext:TreeNode Text="Test">
<Nodes>
<ext:TreeNode Text="Node1" />
<ext:TreeNode Text="Node2" />
</Nodes>
</ext:TreeNode>
</Root>
<Plugins>
<ext:GenericPlugin runat="server" InstanceName="Ext.ux.HoverActions">
<CustomConfig>
<ext:ConfigItem
Name="actions"
Value="actions"
Mode="Raw" />
</CustomConfig>
</ext:GenericPlugin>
</Plugins>
</ext:TreePanel>
</form>
</body>
</html>
