PDA

View Full Version : DDFields: Drag and Drop Form Fields



kurtis
31 Dec 2008, 9:22 AM
I needed to drag TreeNodes and grid rows onto form fields for a project. Here's my implementation, along with a quick demonstration of how to use the new functionality.

Each of the DD* objects extends the corresponding Ext.form.* object.

Included:
DDField
DDTextField
DDTextArea
DDTriggerField
DDComboBox
DDCheckbox
DDRadio
DDNumberField
DDDateField
DDTimeField

The Drag and Drop code originally came from DDView.js (included in .zip), found here:
http://extjs.com/learn/Extension:Multiselect2

Hope this helps out some folks. Feel free to hack/modify/castrate this code for your own use and benefit. I'll keep checking back on this thread for suggestions/bugs.

Live demo here:
http://projects.kopfhaus.net/demo/ddfields/

Updated 2009/01/08
fixed extraneous comma in test.js
moved DDFields into Ext.ux.form namespace
fixed incorrect rendering call in afterRender function
added date and time rows to the example grid in test.js
added JSDoc commentsUpdated 2009/01/13

added "beforedrop" handler, allows user to verify hovering node's contents before allowing drop

jsakalos
31 Dec 2008, 10:58 AM
Sounds interesting. Any chance of a live demo?

kurtis
31 Dec 2008, 11:07 AM
Sure thing. Here's a live demo.

http://projects.kopfhaus.net/demo/ddfields/

mjlecomte
31 Dec 2008, 12:51 PM
Interesting. I didn't see where the tree nodes would update the form fields like it would with the grid drop. I did notice that the qtip did update with either the tree or grid drop.

galdaka
1 Jan 2009, 10:46 AM
Not work in IE6. OK in FF2.

Greetings,

kurtis
5 Jan 2009, 8:06 AM
Interesting. I didn't see where the tree nodes would update the form fields like it would with the grid drop. I did notice that the qtip did update with either the tree or grid drop.
You can't drop invalid values into a form field because I'm using setValue in the example, which uses field validation. IE you can't drop text into a number field. I don't know if that's what you were noticing or not. Which browser are you using?


Not work in IE6. OK in FF2.
I don't have a machine with IE6 to test on. Is there a useful error you're seeing?

bluecx
7 Jan 2009, 7:18 PM
Sorry,My English is very pool!
here is test.js
no.131
viewConfig: {
forceFit: true,
},
is red error;

right is here:
viewConfig: {
forceFit: true
},

galdaka
7 Jan 2009, 11:40 PM
Extra comma in line 131.

kurtis
8 Jan 2009, 8:40 AM
Thanks bluecx and galdaka.

Original post updated with the new zip file and a list of things I changed. Live demo was updated as well.

Scorpie
12 Jan 2009, 1:07 AM
Nice!

kurtis
13 Jan 2009, 4:24 PM
Added 'beforedrop' handler. You can now verify the contents of a hovering node with your own function and allow/disallow the drop. Zip file was updated, I'll add some more to the demo later.

ianpettitt
11 Feb 2009, 2:28 AM
The live demo on http://projects.kopfhaus.net/demo/ddfields/ isn't working for me, FireBug reports the following error:

Ext.ux.form.DDTextField is not a constructor
http://projects.kopfhaus.net/demo/ddfields/test.js
Line 150

I down loaded zip file and still got the error, so I edited DDFields.js, uncommenting lines 344-350. This enables the page to render, but I am unable to drop nodes on to form fields

sp1r1t
12 Dec 2009, 2:45 PM
Hello!

I cant get it workin. Is there an another example page for this?
I'm triing to get working the datefield but seems to me nothing to happen around the dnd.


var ddDate = new Ext.ux.form.DDDateField({
region: 'center',
width: 200
});

var dateTab = new Ext.Panel({
id:'dateTab',
frame: true,
region: 'center',
margins: '5 5 5 0',
width: 450,
height: 300,
items: [ddDate]
});

Am I mising something?

iavci
25 Jan 2011, 9:04 AM
Thanks a lot Kurtis, I've been working on exactly the same thing for a few days.
BTW, files in zip need some small changes and your live demo page is giving 404 error, if anyone needs I can put the working version.