1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    37
    Vote Rating
    0
    ShrutiRuparel is on a distinguished road

      0  

    Default Unanswered: ExtJS 4.1 Tree Drag & Drop

    Unanswered: ExtJS 4.1 Tree Drag & Drop


    I have recently started using ExtJS 4.1 & working with drag & drop. I had prev posted a similar ques(extjs 4.0.7) & had got perfectly working soln. : http://www.sencha.com/forum/showthre...-to-tree-panel

    I want drag & drop with tree panel, but i want to COPY node when i drag it from one tree to another instead of MOVE which i am able to achieve through this :
    Code:
    ......
    onTreedragdroppluginBeforeDrop: function(node, data, overModel, dropPosition, dropFunction, options) {
                   data.copy = true;
      }
    ......
    The problem is I am not able to copy dragged node's CHILDREN. So i want drag node alongwith its children & drop it to a newer node.
    Can someone redirect me to the solution!?

  2. #2
    Sencha User
    Join Date
    May 2012
    Posts
    13
    Vote Rating
    0
    Ashulove is on a distinguished road

      0  

    Default


    hi i need help to make a dd form with these ditals...

    1. What should the application contain?
    - Viewport (Layout: border)
    - Header (Region: north)
    - Navigation (Region: west)
    - Main area (Region: center)


    2. What's the use of the application?
    - Movie collection database, where you can store details about moviews


    3. Content in each region
    - Header:
    - Left side : Small logo (We will create this, he just needs to implement it)
    - Right side: Link to refresh the system


    - Navigation:
    - Categories
    - Add : Open a window to add a category
    Fields:
    - Category name (Mandatory)
    - Description (Optional)


    - List : Open a window with a grid panel
    Grid headers:
    - Category name
    - Description


    - Directors
    - Add : Open a window to add a director
    Fields:
    - Name (Mandatory)
    - Description (Optional)


    - List : Open a window with a grid panel
    Fields:
    - Name
    - Description
    - Content: (Tab panel)
    - Grid panel to view a list of movies
    Fields:
    - Move title (Mandatory)
    - Release year (Optional)
    - Category (Mandatory)
    - Director (Mandatory)
    - IMDB Link (Optional)
    - Toolbar
    - Add : Open a window with a form
    Fields:
    - Move title (Mandatory)
    - Release year (Optional)
    - Category (Mandatory, multi select, combo box)
    - Director (Mandatory)
    - IMDB Link (Optional)


    - Edit : Open a window with a form
    Fields:
    - Same as in add


    - Delete : Delete all selected rows
    - IMDB : Display the movies IMDB page in a new tab
    NOTE:
    - If no row is selected, display an information window telling the user to select a row first
    - If no link is present, display an information window telling the user that there is no IMDB link saved on this movie
    without mvc
    does any one help me...


    my still code is

    Ext.onReady(function()
    {
    var store = Ext.create('Ext.data.TreeStore', {
    region: 'west',
    collapsible: true,
    title: 'Navigation',
    root: {
    expanded: false,
    children: [{
    text: "Category",
    expanded: true,
    children: [{
    text: "Add",
    id: 'add',
    leaf: true
    }, {
    text: "List",
    id: 'list',
    leaf: true
    }]
    }, {
    text: "Director",
    expanded: true,
    children: [{
    text: "Add",
    id: 'aadd',
    leaf: true
    }, {
    text: "List",
    id: 'llist',
    leaf: true
    }]
    }]
    }
    });

    tab_center = new Ext.TabPanel({
    xtype: 'tabpanel',
    id: 'pa',
    resizeTabs: true,
    //floating: true,
    // centered: true,
    iconCls: 'icon-user-add',
    closable: true,
    minTabWidth: 115,
    tabWidth: 100,
    enableTabScroll: true,
    layoutOnTabChange: true,
    border: false,
    activeItem: 'tab_ADD',
    autoDestroy: false,
    items: [{
    xtype: 'panel',
    id: 'tab_ADD',
    closable: true,
    bodyStyle: 'padding:10px',
    title: 'ADD'
    }]
    });
    {
    var viewport = Ext.create('Ext.Viewport', {
    id: 'example',
    items: [{
    region: 'South',
    border: false,
    height: 20,
    tbar: [ '->', {
    text: 'Refresh'
    }, '-', {
    text: 'Logout'

    }]
    },
    ]
    })
    }
    /*Ext.define('Ext.Category', {
    models: [ 'Category' ],
    stores: [ 'Category' ],
    views: [ 'category.Tree' ],
    init: function() {
    this.control({
    'categorytree': {
    itemdblclick: this.onTreeItemdblclick
    }
    });
    },
    onTreeItemdblclick: function (tree, record, item, index, e, eOpts) {
    var mainTabs = Ext.getCmp('tabpanel');
    var tabId = record.get('id');
    if (mainTabs) {
    var checkTab = mainTabs.getComponent(tabId);
    if (checkTab) {
    mainTabs.setActiveTab(checkTab);
    } else {
    var controller;
    var list;
    switch (tabId) {
    case '0101':
    list = Ext.widget('list');
    break;
    }
    if (list)
    {
    var tabPage = mainTabs.add({
    id: record.get('id'),
    title: record.get('name'),
    closable: true,
    layout: 'fit',
    items: [ list ]
    });
    mainTabs.setActiveTab(tabPage);
    }
    }
    }
    }
    })*/
    tree_dir = Ext.create('Ext.tree.Panel', {
    id: 'forum-tree',
    region: 'west',
    title: 'Forum',
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody(),
    split: true,
    width: 150,
    height: 300,
    margins: '0 0 5 5',
    lines: true,
    autoScroll: true,
    listeners: {
    itemclick: function(){
    var tab = tab_center.add({
    closable: true,
    title: (tab_center.items.length +'ADD'),
    });
    tab_center.setActiveTab(tab);
    }
    }
    });
    viewport = Ext.create('Ext.Viewport', {
    id: 'border-example',
    layout: 'anchor',
    width: 700,
    height: 400,
    layout: 'border',
    bodyStyle: 'padding: 5px;',


    items: [tree_dir, tab_center]
    });
    viewport.show();


    });
    PLZ Help me
    thnx in advance...

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    37
    Vote Rating
    0
    ShrutiRuparel is on a distinguished road

      0  

    Default


    i would suggest you to post new(seperate) thread for your ques..

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    11
    Vote Rating
    0
    Answers
    1
    kid- is on a distinguished road

      0  

    Default


    You need to add the following to your tree.Panel definition
    Code:
    viewConfig: {
      copy: true
    }

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    13
    Vote Rating
    0
    Ashulove is on a distinguished road

      0  

    Default


    hi i need help to make a dd form with these ditals...

    1. What should the application contain?
    - Viewport (Layout: border)
    - Header (Region: north)
    - Navigation (Region: west)
    - Main area (Region: center)

  6. #6
    Sencha User
    Join Date
    May 2012
    Posts
    13
    Vote Rating
    0
    Ashulove is on a distinguished road

      0  

    Default plz help me to make this application which contain:

    plz help me to make this application which contain:


    1. What should the application contain?
    - Viewport (Layout: border)
    - Header (Region: north)
    - Navigation (Region: west)
    - Main area (Region: center)

    Content in each region
    Header:
    - Right side: Link to refresh the system


    - Navigation:
    - Categories
    - Add : Open a window to add a category
    Fields:
    - Category name (Mandatory)
    - Description (Optional)



    - List : Open a window with a grid panel
    Grid headers:
    - Category name
    - Description


    - Directors
    - Add : Open a window to add a director
    Fields:
    - Name (Mandatory)
    - Description (Optional)


    - List : Open a window with a grid panel
    Fields:
    - Name
    - Description
    - Content: (Tab panel)
    - Grid panel to view a list of movies
    Fields:
    - Move title (Mandatory)
    - Release year (Optional)
    - Category (Mandatory)
    - Director (Mandatory)

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Posts
    37
    Vote Rating
    0
    ShrutiRuparel is on a distinguished road

      0  

    Default


    stop posting your questions into my thread..i have posted thread to get ans to my ques.. Put some efforts yourself..As i have prev said, post ques as DIFFERENT/NEW thread NOT INTO MY THREAD..

  8. #8
    Sencha User
    Join Date
    Mar 2011
    Posts
    37
    Vote Rating
    0
    ShrutiRuparel is on a distinguished road

      0  

    Default


    thnx @kid..i have specified it in beforedrop event..my code looks like this :
    Code:
     
    
    Ext.define('MyApp.view.ProdConfigVP', {
        extend: 'Ext.container.Viewport',
         id: 'ProdConfigVP',
        layout: {
            align: 'stretch',
            type: 'hbox'
        },
    
    
        initComponent: function() {
            var me = this;
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'treepanel',
                        id: 'ProdConfigP1',
                        title: 'My Tree Panel',
                        store: 'P1Store',
                        rootVisible: false,
                        flex: 1,
                        viewConfig: {
                            draggable: true,
                            plugins: [
                                Ext.create('Ext.tree.plugin.TreeViewDragDrop', {
                                    ptype: 'treeviewdragdrop',
                                    ddGroup: 'treeTOtree',
                                    enableDrop: false
                                })
                            ],
                            listeners: {
                                beforedrop: {
                                    fn: me.onTreedragdroppluginBeforeDrop1,
                                    scope: me
                                }
                            }
                        },
                        dockedItems: [
                            {
                                xtype: 'toolbar',
                                dock: 'top',
                                items: [
                                    {
                                        xtype: 'combobox',
                                        width: 250,
                                        fieldLabel: 'Select Category',
                                        displayField: 'search_key',
                                        store: 'ProductCatagory',
                                        valueField: 'id',
                                        listeners: {
                                            change: {
                                                fn: me.onComboboxChange,
                                                scope: me
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'treepanel',
                        id: 'ProdConfigP2',
                        title: 'My Tree Panel',
                        store: 'P2Store',
                        root: {
                            text: 'myRoot',
                            id: 0
                        },
                        flex: 1,
                        viewConfig: {
                            plugins: [
                                Ext.create('Ext.tree.plugin.TreeViewDragDrop', {
                                    ptype: 'treeviewdragdrop',
                                    appendOnly: true,
                                    ddGroup: 'treeTOtree'
                                })
                            ],
                            listeners: {
                                beforedrop: {
                                    fn: me.onTreedragdroppluginBeforeDrop,
                                    scope: me
                                }
                            }
                        }
                    },
                    {
                        xtype: 'tabpanel',
                        id: 'ProdConfigP3',
                        activeTab: 0,
                        flex: 1,
                        items: [
                            {
                                xtype: 'panel',
                                title: 'Tab 1'
                            },
                            {
                                xtype: 'panel',
                                title: 'Tab 2'
                            },
                            {
                                xtype: 'panel',
                                title: 'Tab 3'
                            }
                        ]
                    }
                ]
            });
    
    
            me.callParent(arguments);
        },
    
        onTreedragdroppluginBeforeDrop1: function(node, data, overModel, dropPosition, dropFunction,       options) {
        },
    
        onComboboxChange: function(field, newValue, oldValue, options) {
            var catProductStore = Ext.data.StoreManager.lookup('P1Store');
            catProductStore.load({params:{product_category_id:newValue}});
        },
    
    
        onTreedragdroppluginBeforeDrop: function(node, data, overModel, dropPosition, dropFunction, options) {
             data.copy = true;
        }
    
    });

  9. #9
    Sencha User
    Join Date
    May 2012
    Posts
    11
    Vote Rating
    0
    Answers
    1
    kid- is on a distinguished road

      0  

    Default


    Nevertheless, try to specify copy: true in viewConfig. It looks like data object in beforedrop event doesn't influence to dropped item behavior.
    copy : BooleanThe value of the TreeView's copy property, or true if the TreeView was configured with allowCopy: true and the control key was pressed when the drag operation was begun

  10. #10
    Sencha User
    Join Date
    May 2012
    Posts
    13
    Vote Rating
    0
    Ashulove is on a distinguished road

      0  

    Default okk

    okk


    okkk sorry for that... its not repeated again, im so sorry..

Thread Participants: 2

Tags for this Thread