[CLOSED] Drag and Drop from tree in one BorderLayour region to tree in another region

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Drag and Drop from tree in one BorderLayour region to tree in another region

    I have a TreePanel in one BorderLayout region, and I want to drag and drop to another tree in another region. This doesn't seem to be working for me, and I think that it's because each different region is implemented in its own frame. Is it possible to do this?

    I have done something kind of similar where I can drag from the tree into a div in the other region, using a DropTarget, but can't get it working between 2 ExtJS controls in different regions.

    Is this possible?

    Thanks
    Last edited by Daniil; Jul 14, 2011 at 1:54 PM. Reason: [CLOSED]
  2. #2
    Hi,

    The following example works fine.

    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>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
            <ext:Panel 
                runat="server" 
                Width="500" 
                Height="400" 
                Layout="BorderLayout">
                <Items>
                    <ext:TreePanel 
                        runat="server" 
                        Region="West" 
                        Width="200" 
                        EnableDD="true">
                        <Root>
                            <ext:TreeNode Text="Root" Expanded="true">
                                <Nodes>
                                    <ext:TreeNode Text="Node11" />
                                    <ext:TreeNode Text="Node12" />
                                    <ext:TreeNode Text="Node13" />
                                </Nodes>
                            </ext:TreeNode>
                        </Root>
                    </ext:TreePanel>
                    <ext:Panel runat="server" Region="Center" Html="Center" />
                    <ext:TreePanel 
                        runat="server" 
                        Region="East" 
                        Width="200" 
                        EnableDD="true">
                        <Root>
                            <ext:TreeNode Text="Root" Expanded="true">
                                <Nodes>
                                    <ext:TreeNode Text="Node21" />
                                    <ext:TreeNode Text="Node22" />
                                    <ext:TreeNode Text="Node23" />
                                </Nodes>
                            </ext:TreeNode>
                        </Root>
                    </ext:TreePanel>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  3. #3
    Hi,

    Drag&Drop between iframes is not possible
  4. #4
    Hmm, so it's not because of the regions then, like Danni said it works fine in that example.

    After some more investigations - I have a tabPanel with a panel that contains the 2nd Tree where I want to drag to. If I include this in my markup it seems to be working, but I am loaded this tabPanel page dynamically:

    CableSense.addTab({ title: 'Changes', url: '/Changes', icon: 'icon-asteriskred' });
    And inside that view, I establish a ResourceManager like so:

        <ext:ResourceManager ID="ResourceManager1" runat="server" />

    And it seems doing it this way breaks the functionality... Can this be solved?
  5. #5
    I was not sure that you use iframes.

    Well, unfortunately, as Vladimir mentioned it's not possible to drag&drop through iframes.
  6. #6
    Daniil example doesn't use iframes
    If trees are placed in the different iframes (or one of tree in a iframe) then dragging operation is not possible because events are not propogated between iframes (or between page and iframe)
  7. #7
    Quote Originally Posted by Vladimir View Post
    Daniil example doesn't use iframes
    If trees are placed in the different iframes (or one of tree in a iframe) then dragging operation is not possible because events are not propogated between iframes (or between page and iframe)
    Hmm, so what is forcing the code to use iframes? If I can add the markup to a tabpanel and have it work, can I not dynamically add to a tabpanel and avoid iframes?
  8. #8
    What is located in the following url?
    url: '/Changes'
    Aspx page? General page with ASP.NET form and etc?
    It is better if you provide test sample which demosntrated how all is configured
  9. #9
    Quote Originally Posted by Vladimir View Post
    What is located in the following url?
    It's an MVC view page, with an EXT viewport and the tree that I want to drag onto. I'll post some code soon. thanks.
  10. #10
    Code:

    My main tree is in a master page - it's quite long so I've chopped a lot of it out:

      <ext:BorderLayout ID="BorderLayout1" runat="server">
            <West>
                            <ext:TreePanel ID="TreePanel1" runat="server" AutoDataBind="true" Height="300" EnableDD="true" Region="Center" RootVisible="false"
                            AnchorVertical="100%" AnchorHorizontal="100%" Icon="BookOpen" Animate="true" AutoScroll="true" UseArrows="true" ContainerScroll="true" ContextMenuID="TreeContextMenu">
    
    
                            <TopBar>
                                <ext:Toolbar ID="Toolbar2" runat="server">
                                    <Items>
                                        <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Filter:" />
                                        <ext:ToolbarSpacer />
                                        <ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true">
                                            <Triggers>
                                                <ext:FieldTrigger Icon="Clear" />
                                            </Triggers>
                                
                                            <Listeners>
                                                <KeyUp Fn="Cablesense.filterTree" Buffer="250" />
                                                <TriggerClick Handler="clearFilter();" />
                                            </Listeners>
                                        </ext:TriggerField>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Loader>
                                <ext:WebServiceTreeLoader DataUrl="/LocationData/GetPhysicalStructure/" Json="true">
                                <BaseParams>
                                    <ext:Parameter Name="type" Value="#{TreePanel1}.menuNode ? #{TreePanel1}.menuNode.id : ''" Mode="Raw" />
                                </BaseParams>
                                <Listeners>
                                    <BeforeLoad Fn="Cablesense.setTypeOfLoadingNode"/>
                                </Listeners>
                                </ext:WebServiceTreeLoader>
                            </Loader>
                            <Root>
                                <ext:AsyncTreeNode NodeId="0" Text='<%# ViewBag.CompanyName %>' Expanded="true"  Icon="World">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="type" Value="company" Mode="Value"></ext:ConfigItem>
                                    </CustomAttributes>
                                </ext:AsyncTreeNode>
                            </Root>
                            <BottomBar>
                                <ext:StatusBar ID="StatusBar1" runat="server" AutoClear="5500" />
                            </BottomBar>
                            <Listeners>
                                <ContextMenu Fn="Cablesense.setupContextMenu"/>
                                <Click Fn="Cablesense.handleTreeNodeClicked" />
                                <ExpandNode Handler="#{StatusBar1}.setStatus({text: 'Node Expanded: <b>' + node.text + '<br />', clear: true});"
                                    Delay="30" />
                                <CollapseNode Handler="#{StatusBar1}.setStatus({text: 'Node Collapsed: <b>' + node.text + '<br />', clear: true});" />
                                <Load Fn="Cablesense.treeDataLoaded" />
                                <MoveNode Fn="Cablesense.handleTreeNodeMove" />
                            </Listeners>
                        </ext:TreePanel>
          </West>
            <Center>
                <ext:TabPanel ID="tpMain" runat="server" Region="Center" EnableTabScroll="true">
                    <Items>
                        <ext:Panel ID="MapTab" runat="server" Title="Map" Icon="Map" Border="false">
                            <Content>
                                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                            </Content>
                            <Listeners>
                                <Resize Fn="Cablesense.resizeMap" />
                                <Activate Handler="if (cs_map) cs_map.refreshMap();" />
                            </Listeners>
                        </ext:Panel>
                    </Items>
                    <Plugins>
                        <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
                    </Plugins>
                </ext:TabPanel>
            </Center>
    So in my center area, I have a TabPanel called tpMain (ignore the MapTab)

    On page load, I call
    CableSense.addTab({ title: 'Manage', url: '/Manage', icon: 'icon-asteriskred' });
    Which then calls the Index action of the ManageController. This is where the receiving tree is:
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" />
    
    <ext:Viewport ID="ViewPort1" runat="server">
            <Items>
                <ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="true" FitHeight="true">
                    <Columns>
                        <ext:LayoutColumn ColumnWidth="0.6">
                            <ext:Panel ID="CommandPanel" runat="server" Title="Cable-Sense Operations" Padding="10"
                                Frame="true" Layout="Form" LabelWidth="200">
                                <Items>
                                <ext:TreePanel ID="TreePanel1" runat="server" AutoDataBind="true" Height="300" RootVisible="true"
                                                        AnchorVertical="100%" AnchorHorizontal="100%" Icon="BookOpen" Animate="true" EnableDD="true"
                                                        AutoScroll="true" UseArrows="true" ContainerScroll="true"> 
                                                        <Root>
                                                            <ext:TreeNode AllowDrop="true" NodeID="0" Text='TODO: Get from the install location'
                                                                Expanded="False" Icon="World" Expandable="true">
                                                                <CustomAttributes>
                                                                    <ext:ConfigItem Name="type" Value="root" Mode="Value" />
                                                                </CustomAttributes>
                                                            </ext:TreeNode>
                                                        </Root>
                                                       <%-- <Listeners/>
                                                        <Loader>
                                                            <ext:WebServiceTreeLoader DataUrl="/LocationData/GetPhysicalStructure/" Json="true">
                                                                <BaseParams>
                                                                    <ext:Parameter Name="type" Value="#{HorizTree}.menuNode ? #{HorizTree}.menuNode.id : ''" Mode="Raw" />
                                                                </BaseParams>
                                                                <Listeners>
                                                                    <BeforeLoad Fn="SCUController.setTypeOfLoadingNode" />
                                                                </Listeners>
                                                            </ext:WebServiceTreeLoader>
                                                        </Loader>--%>
                                                    </ext:TreePanel>
    ... rest of page
    The addTab function is taken from your MVC sample:

    addTab: function (config) {
            if (Ext.isEmpty(config.url, false)) {
                return;
            }
    
            var tp = Ext.getCmp('tpMain');
            var id = this.hashCode(config.url);
            var tab = tp.getComponent(id);
    
            if (!tab) {
                tab = tp.addTab({
                    id: id.toString(),
                    title: config.title,
                    iconCls: config.icon || 'icon-applicationdouble',
                    closable: true,
                    autoLoad: {
                        showMask: true,
                        url: config.url,
                        mode: 'iframe',
                        noCache: true,
                        maskMsg: "Loading '" + config.title + "'...",
                        scripts: true,
                        passParentSize: config.passParentSize
                    }
                });
            } else {
                tp.setActiveTab(tab);
                Ext.get(tab.tabEl).frame();
            }
        },
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 0
    Last Post: Dec 19, 2011, 12:11 AM
  2. [CLOSED] drag and drop in tree panels question
    By bogc in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 31, 2011, 7:43 PM
  3. Region Collapse Question
    By rnachman in forum 1.x Help
    Replies: 0
    Last Post: Jan 28, 2011, 4:50 PM
  4. Replies: 0
    Last Post: Aug 10, 2010, 5:27 AM
  5. Drag from Tree to Multiselect
    By rthiney in forum 1.x Help
    Replies: 0
    Last Post: Jul 17, 2009, 10:20 AM

Posting Permissions