PDA

View Full Version : drag and drop re order list



kesav
20 Aug 2007, 1:17 PM
I would like to build a reorder list similar to http://www.dhtmlgoodies.com/scripts/arrange-nodes/arrange-nodes-d2.html. Where my users can drag and drop rows according to their order. Can any one help me or show some pointers in how to implement this.

Thanks in advance
-kesav

evant
20 Aug 2007, 1:28 PM
I usually just use a tree to do it.

kesav
20 Aug 2007, 2:19 PM
I want arrange rows in Ext.grid. I have list of data that I display in grid and would like to allow users to arrange them. Is it possible to do with grid?

-kesav

cecol
22 Aug 2007, 5:39 PM
hello evant
I just want to change the order of tree node by drag and drop,my problem is when i drag the node,but then i don't change the position of the node,in my program how can i know it?
can you give me some advice?

evant
22 Aug 2007, 5:46 PM
http://extjs.com/deploy/ext/docs/output/Ext.tree.TreePanel.html#event-nodedrop

Troy Wolf
23 Aug 2007, 7:39 AM
I too would like to create a very "simple" drag & drop reorder list similar to the one found at http://www.dhtmlgoodies.com/scripts/arrange-nodes/arrange-nodes-d2.html. Specifically, I'll have 3 strings (probably with a nice-looking surrounding box) vertically stacked and the user needs to be able to reorder them before submitting a form.

I'm new to Ext, but I'm looking at examples and reading the manual. A lot of Drag & Drop seems tied to the Tree object. Do I have to use a tree to create the D&D list I want? And if so, can the tree be formatted to appear as a simple list rather than a tree?

Btw, I see the Community Manual has a lot of empty sections. This Community Manual could be a great place for people to share their knowledge of working with the various Ext objects and simple implementation examples. I want more simple code examples. :) Hopefully as I master some of these objects, I can contribute. Thanks for the great community here!
http://extjs.com/learn/Ext_Manual

Animal
23 Aug 2007, 7:58 AM
Use this: http://extjs.com/forum/showthread.php?t=9629 It's a native Ext View which allows DnD.

Troy Wolf
23 Aug 2007, 8:19 AM
Animal, I've seen your screenshots and explanations of that code, and it's beautiful, but man that is a lot of code for me to look through for a simple D&D reorder list example. :)

Animal
23 Aug 2007, 8:28 AM
It's simple to implement. BernardChhun did it.

It's exactly the same as http://extjs.com/deploy/ext/docs/output/Ext.View.html

Plus a few extra config options:



/** @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
/** @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
/** @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
/** @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */


So if you just want a sortable list, you'd just add



dragGroup: 'thisViewId',
dropGroup: 'thisViewId'


To your View config and it would be drag-droppable within itself only.

oyvind.kinsey
30 Jul 2008, 12:14 AM
Here is a reorder list done using standard Ext DnD components.
http://kinsey.no/blog/2008/07/29/ASimpleReorderListInExtJS.aspx