PDA

View Full Version : Extjs Drag and Drop to textfield/combobox using DDTarget



frazras
10 Jul 2014, 6:28 PM
I posted this on Stackoverflow but got no answers: https://stackoverflow.com/questions/24685426/extjs-drag-and-drop-to-textfield-combobox-using-ddtarget

I have Drag and Drop working between 2 grids but I want to add a new Drop Target as a text field (combobox later), however everytime I drop the item onto the textfield,
I keep getting this error:


Uncaught TypeError: Cannot read property 'focus' of undefined

The error occurs in ext-all.js at this section:


onValidDrop: function(target, e, id) {
this.callParent();
target.el.focus();
},

I have defined the textfield like this:


{
fieldLabel : 'bName',
id : 'bname',
name : 'tournaments[bname]',
xtype : 'textfield',
value : '',
allowBlank : false
}

and created the Drag Drop Target like this:


var mediabox = new Ext.dd.DDTarget('bname', 'group1');

Am I doing something wrong?

mitchellsimoens
16 Jul 2014, 10:58 AM
To do this properly, you should create a DropTarget on the field after the field has been rendered. This is what the grid's DD plugin does under the hood.

frazras
16 Jul 2014, 11:03 AM
How do you determine when it has been rendered? Is there a special listener or something I should use?
Could you show me an example of what is a pre-render operation VS a post-render operation and how do I tell the difference?

mitchellsimoens
16 Jul 2014, 11:04 AM
You can use the render or afterrender event on the field.

frazras
16 Jul 2014, 12:02 PM
Hmm that doesn't seem to work, I tried both afterrender and render like you suggested for an element with id : "featured":


afterrender: function(this_, eOpts ){
var featured_target = new Ext.dd.DDTarget(this_,'group1');
console.log(featured_target);
},

and here was what I got for the result of the console.log of target object, notice there is no el property, hence why target.el.focus(); is undefined

49679

mitchellsimoens
16 Jul 2014, 12:04 PM
I don't think you fully understand the basics of DD in Ext, this recent blog actually does a great job at explaining it: http://moduscreate.com/drag-and-drop-basics-with-ext-js/

frazras
16 Jul 2014, 2:37 PM
Thanks for the article, it was informative. Unfortunately I don't think it addressed the issue I am having. In the article, the divs already existed in the DOM - I guess you could say they were pre-rendered, with my example, The Javascript is generating the components and based on what you said earlier, I was trying to do the drag and drop procedures before the components were rendered.

I pretty much already had all the listed steps in the article covered, I just cant figure out how to correctly create the target with all the relevant properties. :-/