Databases
StackOverflow2013
Postsdbo
POEXTJS4 - Drag-Drop between two Trees with Ext.Direct Proxy - problems
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEXTJS4 - Drag-Drop between two Trees with Ext.Direct Proxy - problems
    primarykey
    data
    text
    <p>I hope anyone can help me with this one.</p> <p>I have 2 Trees. One on the left and one on the right.</p> <p>Each tree has it's own store, and its own CRUD api direct functions. But they share the same model. <strong>AutoSync</strong> is set to true.</p> <p>like this: <a href="http://extjs.dev.abteam.si/index.html" rel="nofollow">http://extjs.dev.abteam.si/index.html</a></p> <p>Here is the code:</p> <pre><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' } } }] }); }); </code></pre> <p><strong>The problem # 1.)</strong> </p> <p>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)</p> <p>and similar,</p> <p>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". </p> <p>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).</p> <p>Am i thinking in the right direction?</p> <p><strong>The problem #2.)</strong></p> <p>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).</p> <p>Can you please tell me what am i missing here.</p> <p>Why all nodes are flagged as "dirty" and sent to the server and not only changed nodes ? </p> <p>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.</p> <p>example URL: <a href="http://extjs.dev.abteam.si/index.html" rel="nofollow">http://extjs.dev.abteam.si/index.html</a></p> <p>I would like to implement drag-drop between 2 (or more) trees. </p> <p>I hope someone can help me with this one, because i have searched all internet and i didn't find working example.</p> <p>best regards, Andrej </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USuser2810578
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POEXTJS4 - Drag-Drop between two Trees with Ext.Direct Proxy - problems
      1. USvicenteherrera
      1. VTFavorite
    1. CODefault behaviour for drag and drop between two components is to add a node to the second, and do nothing on the first. You should write a listener function, rewrite the beforedrop event to remove original node.
      singulars
      1. POEXTJS4 - Drag-Drop between two Trees with Ext.Direct Proxy - problems
      1. USvicenteherrera
    2. COAlso, sending the full tree may acknowledge that you can have changed a "folder" node, so all the tree structure could be compromised. Also you could select and move multiple nodes at once. I presume Extjs doesn't implement a complex tree comparison algorithm, and just send the full tree.
      singulars
      1. POEXTJS4 - Drag-Drop between two Trees with Ext.Direct Proxy - problems
      1. USvicenteherrera
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload