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!