Multiple DragDropAble Tree grid with single DataStore

[adhitia]

Hi All

I'm very new in this EXTJs

I have condition where i must create multiple treegrid with same data

it use for drag-drop (just like explorer in Window)

But when I load single Store for Multiple Tree, its not work as expected

Only one tree that able to load the store, the rest tree is unable to load

Here is the Example Script

store = Ext.create('Ext.data.TreeStore', {
    model: 'Index',
    proxy: {
        type: 'ajax',
        url: '/get_nodes/1.json'
    },
    root: {},
});

tree = Ext.create('Ext.tree.Panel', {
    title: 'Core Team Projects',
    width: 500,
    height: 300,
    store: store,  //HERE I LOAD THE STORE
    viewConfig: {
      plugins: {
          ptype: 'treeviewdragdrop',
        } ,
    },

    tbar:[            
        {
            text: 'Add/New',
            iconCls: 'add16',
            id:'add_new_button'
        },
        {
            text: 'Edit',
            iconCls: 'add16',
            id:'edit_button'
        },
        {
            text: 'Copy',
            iconCls: 'add16',
            menu: [{text: 'Paste Menu Item'}]
        },
        {
            text: 'Paste',
            iconCls: 'add16'
        }],
    columns: [{
        xtype: 'treecolumn', //this is so we know which column will show the tree
        text: 'Index Point',
        flex: 2,
        sortable: true,
        dataIndex: 'description',
        allowDrop: true
    },{
        text: 'Refrence Point',
        flex: 1,
        dataIndex: 'refrence_point',
        sortable: true
    },{
        text: 'Document',
        flex: 1,
        dataIndex: 'file',
        sortable: true
    },{
        text: 'Pages',
        flex: 1,
        dataIndex: 'pages',
        sortable: true
    }
    ,{
        text: 'Date',
        flex: 1,
        dataIndex: 'date',
        sortable: true
    }]
});
 tree2 = Ext.create('Ext.tree.Panel', {
        title: 'Core Team Projects',
        width: 500,
        height: 300,
        store: store, //HERE I LOAD THE STORE FOR SECOND TIME
        viewConfig: {
                    plugins: {
                        ptype: 'treeviewdragdrop',
                        appendOnly: false
                      } ,
                    listeners: {  
                        drop: function (node, data, overModel, dropPosition) {
                          alert('sunGod')

                          Ext.Ajax.request({ 
                              url: '/nodes/move',  
                              method:'POST', 
                              params:{parent_id:data.records[0].data.parentId, node_id:tree.getSelectionModel().getLastSelected().data.id},
                          });       
                          console.log(data.records[0].data.parentId);                   
                          alert(data.records[0].data.parentId);
                          alert(tree.getSelectionModel().getLastSelected().data.id);
                        }
                     }
        },
        columns: [{
            xtype: 'treecolumn', //this is so we know which column will show the tree
            text: 'Index Point',
            flex: 2,
            sortable: true,
            dataIndex: 'description',
            allowDrop: true
        },{
            text: 'Refrence Point',
            flex: 1,
            dataIndex: 'refrence_point',
            sortable: true
        },{
            text: 'Document',
            flex: 1,
            dataIndex: 'file',
            sortable: true
        },{
            text: 'Pages',
            flex: 1,
            dataIndex: 'pages',
            sortable: true
        }
        ,{
            text: 'Date',
            flex: 1,
            dataIndex: 'date',
            sortable: true
        }]
    });
     tree.render('tree-example');
     tree2.render('tree-example2');

I use Plugin for Drag and Drop

I hope there is someone can help me

Thank You



Adhit

[adhitia]

This Problem is not solved yet....

Please anyone can help me