EXT.NET 3.0.0 RELEASED!
Now with Tablet Support!
Ext.NET 3.0.0 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 ?

    <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
    Object.NET + Ext.NET Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,573
    Hi,

    Please use the .init() method of a plugin.
    var plugin = new Ext.ux.HoverActions(config);
    plugin.init(GenericTreePanel)
    Daniil Veriga
    Developer & Support Expert

  3. #3
    Member
    Join Date
    Sep 2011
    Posts
    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
    Object.NET + Ext.NET Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,573
    Please just look at Page Sources to see how a config looks.
    Daniil Veriga
    Developer & Support Expert

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