EXT.NET v3.0 BETA RELEASED!
Now with Tablet Support!
Ext.NET v3.0 Beta is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Results 1 to 4 of 4

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

  1. #1
    Member
    Join Date
    Sep 2011
    Posts
    3

    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 ?

    Code:
    <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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,799
    Hi,

    Please use the .init() method of a plugin.
    Code:
    var plugin = new Ext.ux.HoverActions(config);
    plugin.init(GenericTreePanel)
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Member
    Join Date
    Sep 2011
    Posts
    3
    Thanks for your reply.

    Can you please explain how can i prepare config in
    Code:
     var plugin = new Ext.ux.HoverActions(config);
    to achieve something like this
    Code:
    <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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,799
    Please just look at Page Sources to see how a config looks.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

Similar Threads

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

Posting Permissions