[CLOSED] Multiselection Treepanel Drag Drop Extension

  1. #1

    [CLOSED] Multiselection Treepanel Drag Drop Extension

    Is there anyway to use this extension with the coolite treepanel server side control?

    http://www.sencha.com/forum/showthre...-Drag-and-Drop

    I tried including the javascript and setting the BaseCls on the treepanel but it does not work.

    Thanks,

    Frank
    Last edited by geoffrey.mcgill; Sep 17, 2010 at 5:19 PM. Reason: [CLOSED]
  2. #2
    Hello!

    Please clarify how exactly do you try to use this extension?

    This code works fine. It just needs to add MultiSelectTree-1.1.js to a solution's folder or set a respective url.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
        <ext:ResourcePlaceHolder runat="server" />
    
        <script type="text/javascript" src="MultiSelectTree-1.1.js"></script>
    
        <script type="text/javascript">
            Ext.onReady(function() {
                var tree = 
                    new Ext.ux.MultiSelectTreePanel({
                        autoScroll: true,
                        width: 400,
                        height: 500,
                        animate: true,
                        containerScroll: true,
                        renderTo: Ext.getBody(),
                        ddGroup: 'tree1',
                        enableDD: true, 
                        rootVisible: false,
                        loader: new Ext.tree.TreeLoader(),
                        root: new Ext.tree.AsyncTreeNode({
                            expanded: true,
                            children: 
                                [{
                                    text: 'Menu 1',
                                    expanded: true,
                                    children: [
                                        {
                                            text: 'Option 1.1',
                                            leaf: true
                                        },
                                        {
                                            text: 'Option 1.2',
                                            leaf: true
                                        },
                                        {
                                            text: 'Option 1.3',
                                            leaf: true
                                        }
                                    ]},
                                 {
                                    text: 'Menu 2',
                                    expanded: true,
                                    children: [
                                        {
                                            text: 'Option 2.1',
                                            leaf: true
                                        },
                                        {
                                            text: 'Option 2.2',
                                            leaf: true
                                        },
                                        {
                                            text: 'Option 2.3',
                                            leaf: true
                                        }
                                    ]}
                                ]
                        })
                    });
            });
        </script>
    
        <style type="text/css">
            .x-dd-drag-ghost .x-tree-node-indent, .x-dd-drag-ghost .x-tree-ec-icon {
                display: inline !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        </form>
    </body>
    </html>
    P.S. I downloaded MultiSelectTree-1.1.js from
    http://www.users.on.net/~clear/ext/MultiSelectTree-1.1.js
  3. #3
    I am looking to apply the extension to the Ext.Net Server Control. Is there anyway to change the xtype that server control renders to use this extension instead of the base xtype it is using? What i really want is to have two treepanel server controls on a page and allow multiple drap/drop between them.
  4. #4
    Hi,

    You can create own custom control which inherited from TreePanel
    That extension for ExtJS 2.2 therefore custom class for Coolite 0.8.x
    [Xtype("multiselecttreepanel")]
    [InstanceOf(ClassName = "Ext.ux.MultiSelectTreePanel")]
    public class MultiSelectTreePanel: TreePanel
    {        
    }
  5. #5
    Hi alexkay,

    The MultiSelectTreePanel extension works fine in the Ext.Net too.

    Just download the latest version of .js here
    http://www.users.on.net/~clear/ext/MultiSelectTree-1.1.js

    A custom control for Ext.Net 1.0 can look like this:

    MultiSelectTreePanel.cs

    using System;
    using System.Collections.Generic;
    using Ext.Net;
    
    namespace CustomControls
    {
        public class MultiSelectTreePanel : TreePanel
        {
            public override string InstanceOf
            {
                get
                {
                    return "Ext.ux.MultiSelectTreePanel";
                }
            }
    
            public override string XType
            {
                get
                {
                    return "multiselecttreepanel";
                }
            }
    
            protected override List<ResourceItem> Resources
            {
                get
                {
                    // override it to avoid manually placing resources at a page 
                    return base.Resources;
                }
            }
        }
    }
    Test .aspx page
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Assembly="Work" Namespace="CustomControls" TagPrefix="cc" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript" src="CustomControls/MultiSelectTreePanel/MultiSelectTree-1.1.js"></script>
    
        <style type="text/css">
            .x-dd-drag-ghost .x-tree-node-indent, .x-dd-drag-ghost .x-tree-ec-icon {
                display: inline !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <cc:MultiSelectTreePanel runat="server" Height="300" EnableDD="true">
            <Root>
                <ext:TreeNode Text="Composers" Expanded="true">
                    <Nodes>
                        <ext:TreeNode Text="Beethoven" Expanded="true">
                            <Nodes>
                                <ext:TreeNode Text="Concertos" Expanded="true">
                                    <Nodes>
                                        <ext:TreeNode Text="Concert 1" />
                                        <ext:TreeNode Text="Concert 2" />
                                    </Nodes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
        </cc:MultiSelectTreePanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Sep 30, 2010 at 7:07 PM.
  6. #6
    I try to make a custom control follow you guild,but i've got a script exception like this:
    this.root is null or not a reference in ext.axd. renderRoot:function(){this.root.render();...}
    The ext.net version is 1.0rc1
    Hope to get u reply
  7. #7
  8. #8
    Quote Originally Posted by Daniil View Post
    wow,thank you,it solved!

Similar Threads

  1. Drag Drop events in TreePanel
    By web4u in forum 2.x Help
    Replies: 0
    Last Post: Aug 08, 2012, 6:31 AM
  2. TreePanel - Drag & Drop
    By jigpatel06 in forum 1.x Help
    Replies: 0
    Last Post: Oct 19, 2010, 10:31 AM
  3. [CLOSED] [1.0] - MVC - TreePanel Drag-Drop DirectEvents
    By drkoh in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 22, 2010, 3:11 PM
  4. [CLOSED] TreePanel Drag and Drop
    By davidhoyt in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 28, 2009, 5:24 AM

Tags for this Thread

Posting Permissions