PDA

View Full Version : Drag-Drop between two Trees with Ext.Direct Proxy - problems



andrej_marincic
23 Sep 2013, 12:28 PM
Hi dear sirs/madams,

I hope anyone can help me with this one.

I have 2 Trees. One on the left and one on the right.

Each tree has it's own store, and its own CRUD api direct functions. But they share the same model.
AutoSync is set to true.

like this: http://extjs.dev.abteam.si/index.html

Here is the code:




Ext.define('Model', {
extend: 'Ext.data.Model',
fields: [{
name: 'text',
type: 'string'
}, {
name: 'index',
type: 'int'
}, {
name: 'id',
type: 'int'
}, {
name: 'parentId',
type: 'int'
}]
});

Ext.define('Store_left', {
extend: 'Ext.data.TreeStore',
model: 'Model',
root: {
text: 'Root',
id: 0,
expanded: true
},
proxy: {
type: 'direct',
api: {
create: TestAction.create_left,
read: TestAction.read_left,
update: TestAction.update_left,
destroy: TestAction.destroy_left
},
reader: {
type: 'json',
idProperty: 'id'
}
},
autoLoad: true,
autoSync: true
});

Ext.define('Store_right', {
extend: 'Ext.data.TreeStore',
model: 'Model',
root: {
text: 'Root',
id: 0,
expanded: true
},
proxy: {
type: 'direct',
api: {
create: TestAction.create_right,
read: TestAction.read_right,
update: TestAction.update_right,
destroy: TestAction.destroy_right
},
reader: {
type: 'json',
idProperty: 'id'
}
},
autoLoad: true,
autoSync: true
});

Ext.onReady(function () {
new Ext.panel.Panel({
renderTo: Ext.getBody(),
width: 700,
height: 500,
layout: {
type: 'hbox',
align: 'stretch'
},
defaultType: 'treepanel',
defaults: {
rootVisible: false,
flex: 1
},
items: [{
title: 'Left tree',
store: Ext.create('Store_left'),
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
}
}
}, {
title: 'Right tree',
store: Ext.create('Store_right'),
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
}
}]
});
});



The problem # 1.)

The problem is, when i move a node from the LEFT tree to the RIHGT Tree, only "update_right" direct function is called (only right store is synced, and the left is NOT synced, even though, i removed one node from left tree and dropped it in the tree on the right)

and similar,

When i move node from the RIGHT tree to the LEFT tree, only left store is synced. Even more, on the left tree "update" API is called instead of "create".

What I would like is, when i move node from the LEFT Tree to the RIGHT Tree, i would like destroy_left API to be called and then create_right API function to be called (because i removed node from left store and i added it to the right store).

Am i thinking in the right direction?

The problem #2.)

If i reorder node within the same tree (lets say RIGHT tree), update_right API is called with complete tree as data parameter. I would expect that only 2 nodes would be sent to the server - nodes who changed the position (index property).

Can you please tell me what am i missing here.

Why all nodes are flagged as "dirty" and sent to the server and not only changed nodes :-??

I have prepared simple example. I must tell you that on server side update destroy and create functions are not implemented, but this is not important for the test, because you can try to open firebug and see which server functions are called. Always is called only update and never destroy or create.

example URL: http://extjs.dev.abteam.si/index.html

I hope someone can help me with this one, because i have searched all internet and i didn't find working example :((.


best regards,
Andrej :)

ettavolt
24 Sep 2013, 8:46 AM
#1 - you are wrong. Just drag and drop will change association, not destroy and create then.
#2 - you need to trace sort method and find out why do you have values changing in all nodes.

andrej_marincic
24 Sep 2013, 11:19 AM
Hi ettavolt,
i thought if autoSync is set to true, that all changes on tree (moving nodes, reorder, removing nodes) should propagate to the server via Ext.Direct calls. But i can't make it work.

ettavolt
24 Sep 2013, 11:56 AM
If you want destroy&create consider copying data and then invoking .destroy() on source record.

andrej_marincic
24 Sep 2013, 12:05 PM
Hi ettavolt,

what i want is that changes on tree (changes i make with drag-drop operation) would propagate on server. So if i move one node, my direct function would call server, if i remove node it would call apropriate direct api. So actually that CRUD would work. I cant make it work. It looks i am doing somethig completely wrong, but i can't find out what am i doing wrong. I am desperate, so i posted a project on freelancer.com, because i am willing to pay :) So what i want is CRUD to work correctly.

best regards
andrej

ettavolt
24 Sep 2013, 9:44 PM
This should be a trivial task. If you encounter problems with it you should either invest more into learning or look for an assistant for the whole project.

andrej_marincic
24 Sep 2013, 10:00 PM
Can you give me a hint, where to handle the case when i drag node out of a tree and drop it to some other tree?
I would to like update both trees-the one that one that just "lost" a node a node and the one that just "got" one more node.
Thank you.

ettavolt
25 Sep 2013, 3:52 AM
You may try to do this in beforedrop (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tree.plugin.TreeViewDragDrop-event-beforedrop) event.

andrej_marincic
25 Sep 2013, 3:35 PM
Hi ettavolt,

now i understand it all. I thought that that autoSync does all the magic :). But it is better this way because i can customize it.

I only don't understand why all siblings are marked as dirty and sent to the server when i move node above them. Let's say if there are 10 nodes and i swap position of top, all 10nodes are sent in update call, if i change lets say 7 and 8 than 7,8,9,10 are sent to the server. Can you please help me with that? Is there some special config settings, since no one else reported this problem? Thank you.

ettavolt
27 Sep 2013, 11:58 AM
You can try to inspect .modified property of node records. Then you may try to find, who or what is changing that/those fields.