Sep 21, 2011, 3:41 PM
How to add a plugin to a ext.net tree panel using extjs
I have an aspx page with an ext.net tree panel and a plugin attached to it. I want to remove plugin markup from aspx page and want to add this plugin to tree panel using extjs code. Is anyone aware how can i add a plugin to an ext.net control using extjs ?
<script type="text/javascript">
Ext.override(Ext.tree.TreeNodeUI, {
onOver: function (e) {
this.addClass('x-tree-node-over');
this.node.getOwnerTree().fireEvent('nodeover', this.node);
},
onOut: function (e) {
this.removeClass('x-tree-node-over');
this.node.getOwnerTree().fireEvent('nodeout', this.node);
}
});
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.addEvents('nodeover', 'nodeout');
tree.on({
scope: this,
nodeover: this.onNodeOver,
nodeout: this.onNodeOut,
destroy: this.destroy,
delay: 50
});
this.createElement();
},
destroy: function () {
document.removeChild(this.element);
},
createElement: function () {
var tpl = new Ext.XTemplate(
'<div class="x-hoveractions-outer">',
'<tpl for=".">',
'<img class="{iconCls} x-hoveractions-img" title="{name}" />',
'</tpl>',
'</div>'
);
this.element = tpl.append(document.body, this.actions);
this.element.onclick = this.onClick; //Attach Single OnClick event handler - This does not work in IE & FF but works in Chrome
this.element.ondblclick = this.onClick; //Attach Double OnClick event handler - This work in all browsers
Ext.fly(this.element).hide();
},
onNodeOver: function (node, e) {
var nodeUI = node.getUI();
var nodeEl = new Ext.Element(nodeUI.getIconEl().parentNode);
nodeEl.insertFirst(this.element);
this.node = node;
Ext.fly(this.element).show();
},
onNodeOut: function (node, e) {
Ext.fly(this.element).hide();
document.body.appendChild(this.element);
},
onClick: function (e, t) {
alert() ;
});
}
});
</script>
<ext:TreePanel ID="GenericTreePanel" runat="server" Height="500" Width="400" UseArrows="true"
AutoScroll="true" Animate="false" EnableDD="true" ContainerScroll="true">
<Root>
<ext:AsyncTreeNode NodeID="0" Expanded="true" Icon="Group" SingleClickExpand="true" />
</Root>
<Listeners>
<BeforeLoad Fn="LoadGenericTree" />
</Listeners>
<Plugins>
<ext:GenericPlugin ID="GenericTreePanelPlugin" runat="server" InstanceName="Ext.ux.HoverActions">
<CustomConfig>
<ext:ConfigItem Name="actions" Value="[{id: 'btnInfo', name: 'Information Icon', iconCls: 'x-hoveractions-img-info'},{id: 'btnAdd', name: 'Add Button', iconCls: 'x-hoveractions-img-add'}]" />
</CustomConfig>
</ext:GenericPlugin>
</Plugins>
</ext:TreePanel>
Thanks!