How to add a plugin to a ext.net tree panel using extjs

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    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!
  2. #2
    Hi,

    Please use the .init() method of a plugin.
    var plugin = new Ext.ux.HoverActions(config);
    plugin.init(GenericTreePanel)
  3. #3
    Thanks for your reply.

    Can you please explain how can i prepare config in
     var plugin = new Ext.ux.HoverActions(config);
    to achieve something like this
    <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>
  4. #4
    Please just look at Page Sources to see how a config looks.

Similar Threads

  1. [CLOSED] Implementing ExtJS Grid DataDrop plugin
    By Moltas in forum 1.x Legacy Premium Help
    Replies: 27
    Last Post: Aug 23, 2013, 3:02 PM
  2. Replies: 1
    Last Post: Oct 26, 2012, 8:52 AM
  3. Replies: 3
    Last Post: Jan 06, 2011, 4:46 PM
  4. Replies: 0
    Last Post: Aug 10, 2010, 5:27 AM
  5. Replies: 1
    Last Post: Jan 23, 2009, 6:43 AM

Posting Permissions