Databases
StackOverflow2013
Postsdbo
PODrag and Drop from Grid to Tree and backwards
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODrag and Drop from Grid to Tree and backwards
    primarykey
    data
    text
    <p>Since a few days now I try to change an ExtJs ['Grid to Tree Drag and Drop' Example][1] to work in both directions. But all I get is an 'almost' working application.</p> <p>Now it works as far as I can drag an item from grid to tree, within tree, within grid but if i drag it from tree to grid, it doesn't drop. It just shows the green hook.</p> <p>I also tried to differ the ddGroup from tree and grid, but then nothing works anymore. This is too much for an ExtJs beginner.</p> <pre><code>// Stücklisten Grid stuecklistengrid = Ext.extend(Ext.grid.GridPanel, { initComponent:function() { var config = { store:itemPartStore ,columns:[{ id:'PART_ITE_ID' ,header:"PART_ITE_ID" ,width:200, sortable:true ,dataIndex:'PART_ITE_ID' },{ header:"IS_EDITABLE" ,width:100 ,sortable:true ,dataIndex:'IS_EDITABLE' },{ header:"IS_VISIBLE" ,width:100 ,sortable:true ,dataIndex:'IS_VISIBLE' }] ,viewConfig:{forceFit:true} }; // eo config object // apply config Ext.apply(this, Ext.apply(this.initialConfig, config)); this.bbar = new Ext.PagingToolbar({ store:this.store ,displayInfo:true ,pageSize:10 }); // call parent stuecklistengrid.superclass.initComponent.apply(this, arguments); } // eo function initComponent ,onRender:function() { // call parent stuecklistengrid.superclass.onRender.apply(this, arguments); // load the store this.store.load({params:{start:0, limit:10}}); } // eo function onRender }); Ext.reg('examplegrid', stuecklistengrid); // Stücklisten Tree var CheckTree = new Ext.tree.TreePanel({ root:{ text:'root', id:'root', expanded:true, children:[{ text:'Folder 1' ,qtip:'Rows dropped here will be appended to the folder' ,children:[{ text:'Subleaf 1' ,qtip:'Subleaf 1 Quick Tip' ,leaf:true }] },{ text:'Folder 2' ,qtip:'Rows dropped here will be appended to the folder' ,children:[{ text:'Subleaf 2' ,qtip:'Subleaf 2 Quick Tip' ,leaf:true }] },{ text:'Leaf 1' ,qtip:'Leaf 1 Quick Tip' ,leaf:true }]}, loader:new Ext.tree.TreeLoader({preloadChildren:true}), enableDD:true, ddGroup:'grid2tree', id:'tree', region:'east', title:'Tree', layout:'fit', width:300, split:true, collapsible:true, autoScroll:true, listeners:{ // create nodes based on data from grid beforenodedrop:{fn:function(e) { // e.data.selections is the array of selected records if(Ext.isArray(e.data.selections)) { // reset cancel flag e.cancel = false; // setup dropNode (it can be array of nodes) e.dropNode = []; var r; for(var i = 0; i &lt; e.data.selections.length; i++) { // get record from selectons r = e.data.selections[i]; // create node from record data e.dropNode.push(this.loader.createNode({ text:r.get('PART_ITE_ID') ,leaf:true ,IS_EDITABLE:r.get('IS_EDITABLE') ,IS_VISIBLE:r.get('IS_VISIBLE') })); } // we want Ext to complete the drop, thus return true return true; } // if we get here the drop is automatically cancelled by Ext }} } }); // Stücklisten Container var itemPartList = new Ext.Container({ id: 'itemPartList', title: 'Stücklisten', border:false, layout:'border', items:[CheckTree, { xtype:'examplegrid' ,id:'SLgrid' ,title:'Grid' ,region:'center' ,layout:'fit' ,enableDragDrop:true ,ddGroup:'grid2tree' ,listeners: { afterrender: { fn: function() { // This will make sure we only drop to the view scroller element SLGridDropTargetEl2 = Ext.getCmp('SLgrid').getView().scroller.dom; SLGridDropTarget2 = new Ext.dd.DropTarget(SLGridDropTargetEl2, { ddGroup : 'grid2tree', notifyDrop : function(ddSource, e, data){ var records = ddSource.dragData.selections; Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store); Ext.getCmp('SLgrid').store.add(records); return true } }); } } } }] }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USj0k
    1. USuser1770561
    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. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYou forgot the link..
      singulars
      1. PODrag and Drop from Grid to Tree and backwards
      1. USj0k
 

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