PDA

View Full Version : Problem when drag and drop between tree and grid



lowerthan60
24 Dec 2014, 9:28 AM
Hi Guys,

I'm new to extjs, now is facing a weird problem when create a feature need drag/drop between tree and grid, the problem can be reproduced 100%, I'm not sure if it's a bug so I'll paste the details include reproduce steps, code and screenshot below

----------------------------
Test Steps:
1. Select an item from the tree view
2. Drag the selected item from the tree view and drop it to the grid panel
3. Click the '-' icon of the root node in the tree view to collapse the tree

Expected Result:
1. The selected item can be dropped to the grid panel (Fine)
2. The tree should be collapsed. (Failed)

Actuall Result:
The tree won't be collapsed, only the '-' icon turns to '+', click the '+' icon again looks like the tree will be reloaded with some "parent nodes" because those "parent nodes" will never be collapsed

---------------------------------------------

Screen Shot

51382

------------------------------------------------



Ext.require(['*']);

Ext.define('Apps.demo.model.Resource', {
extend: 'Ext.data.Model',
fields: [{
name: "id",
type: "string"
}, {
name: "text",
type: "string"
}]
});

Ext.onReady(function(){

var myData = [{
id: "g1",
text: "grid_item_1"
}]

var firstGridStore = Ext.create('Ext.data.Store', {
model: 'Apps.demo.model.Resource',
autoLoad: true,
proxy: {
type: 'memory'
}
});

var columns = [{
text: "ID",
flex: 1,
sortable: true,
dataIndex: 'id'
}, {
text: "Text",
width: 70,
sortable: true,
dataIndex: 'text'
}];

Ext.define('KitchenSink.view.tree.TwoTrees', {
extend: 'Ext.container.Container',

requires: [
'Ext.tree.*',
'Ext.data.*',
'Ext.layout.container.HBox'
],
xtype: 'tree-two',


layout: {
type: 'hbox',
align: 'stretch'
},
height: 300,
width: 550,

initComponent: function(){
var group = this.id + '-ddgroup';

Ext.apply(this, {
items: [{
title: 'Source',
xtype: 'treepanel',
store: new Ext.data.TreeStore({
proxy: {
type: 'ajax',
url: './data/treeNodes.json',
extraParams: {
path: 'extjs'
}
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
}),
margin: '0 15 0 0',
flex: 1,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: group,
appendOnly: true,
sortOnDrop: true,
containerScroll: true
}
}
}, {
title: 'Custom Build',
xtype: 'treepanel',
store: new Ext.data.TreeStore({
proxy: {
type: 'ajax',
url: './data/treeNodes.json',
extraParams: {
path: 'extjs'
}
},
root: {
text: 'Custom Ext JS',
id: 'src',
expanded: true,
children: []
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
}),
flex: 1,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: group,
appendOnly: true,
sortOnDrop: true,
containerScroll: true
}
}
}, {
xtype: 'gridpanel',
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
ddGroup: group
},
listeners: {
beforedrop: function (node, data, overModel, dropPosition, dropHandlers, eOpts) {
console.log(data);
},
drop: function (node, data, dropRec, dropPosition) {


}
}
},
name: 'columnPanel',
store: firstGridStore,
columns: columns,
hideHeaders: true,
stripeRows: true,
title: 'Column',
width: '100%',
flex: 1,
margins: '0 2 0 0'
}]
});
this.callParent();
}
});


var tree2 = Ext.create('KitchenSink.view.tree.TwoTrees', {
id: 'tree2',
renderTo: document.body
});
});



--------------------------------
Test Data



[{
"text": "pkgs",
"id": "\/pkgs",
"cls": "folder"
},
{
"text": "overview",
"id": "\/overview",
"cls": "folder"
},
{
"text": "examples",
"id": "\/examples",
"cls": "folder"
},
{
"text": "build",
"id": "\/build",
"cls": "folder"
},
{
"text": "ext-all-debug-w-comments.js",
"id": "\/ext-all-debug-w-comments.js",
"leaf": true,
"cls": "file"
},
{
"text": "builds",
"id": "\/builds",
"cls": "folder"
},
{
"text": "ext-all-debug.js",
"id": "\/ext-all-debug.js",
"leaf": true,
"cls": "file"
},
{
"text": "ext-all.js",
"id": "\/ext-all.js",
"leaf": true,
"cls": "file"
},
{
"text": "jsbuilder",
"id": "\/jsbuilder",
"cls": "folder"
},
{
"text": "ext.js",
"id": "\/ext.js",
"leaf": true,
"cls": "file"
},
{
"text": "docs",
"id": "\/docs",
"cls": "folder"
},
{
"text": "license.txt",
"id": "\/license.txt",
"leaf": true,
"cls": "file"
},
{
"text": "locale",
"id": "\/locale",
"cls": "folder"
},
{
"text": "bootstrap.js",
"id": "\/bootstrap.js",
"leaf": true,
"cls": "file"
},
{
"text": "welcome",
"id": "\/welcome",
"cls": "folder"
},
{
"text": "resources",
"id": "\/resources",
"cls": "folder"
},
{
"text": "index.html",
"id": "\/index.html",
"leaf": true,
"cls": "file"
},
{
"text": "src",
"id": "\/src",
"cls": "folder"
},
{
"text": "ext-debug.js",
"id": "\/ext-debug.js",
"leaf": true,
"cls": "file"
},
{
"text": "release-notes.html",
"id": "\/release-notes.html",
"leaf": true,
"cls": "file"
}]

Gary Schlosberg
29 Dec 2014, 3:06 PM
Seems like an ID conflict. Issue only occurs for me when I expand one of the folders on the left (which populates that folder with duplicate IDs.

lowerthan60
5 Jan 2015, 5:50 AM
Thanks a lot Gary, let me test and will let you know.

lowerthan60
5 Jan 2015, 10:32 AM
Hi Gary,

I've replaced the data store like below with different ids for each node, but the issue is still there. I'm testing with extjs 4.2


[{ "text": "test.html",
"id": "1",
"leaf": true,
"cls": "file"
},{
"text": "test2.html",
"id": "2",
"leaf": true,
"cls": "file"
},{
"text": "test3.html",
"id": "3",
"leaf": true,
"cls": "file"
}]

lowerthan60
5 Jan 2015, 10:47 AM
Also if it's an ID conflict issue, why it's only happen when do drag/drop between tree and grid? it works pretty good when drag/drop only between trees or only grids.