View Full Version : EASY ? Problem: DnD Item is draggable within container but not into an other ...

24 Dec 2013, 5:22 PM
I am standing on the line - maybe someone can give me input - because I got no error-output (also on debug mode):

I have generated 5 Ext.Container with a lot of Items in are draggable within this container.

Also I have made all 5 Container dropable and gave them the same DnDGroup like the Items.
So all are in same Group.
All 5 Containers are in a Panel next to each other.

I only can dragg around items within their own container and not over Container-Borders into a Container next to it.

I have done everything like in the Container-Example.

I have no Ideas why they do not leave there Container.

I tried to override/uncomment parts of DD ... to get Debug-Data (console.log) like described in DD.js ... but I do not get some.
In my opinion I should get, because I can dragg around within a container and they accept a new position.

I think it is a stupid Mistake or a Bug. (ExtJS 4.2.1).

Hope someone see from my description what I do wrong maybe. Posting Code is bad Idea - It is 800 Lines..

Any Ideas ?
I helped others - please help me :)

24 Dec 2013, 6:41 PM
Hum, the way I see it, what you are trying to accomplish it will be very hard the way you are building your app because as far as I know only panels can be dragged outside of their container.

So, one option is to create every item of your container within a panel with the property simpleDrag: true

Or and another option is to create your items inside of an Ext.view.View object and use divs to drag your content like the example: http://docs.sencha.com/extjs/4.2.2/#!/example/dd/dragdropzones.html

25 Dec 2013, 6:09 PM
First: BIG THANKYOU to glopes !!!

as far as I know only panels can be dragged outside of their container

This was an important cause for thought in a new direction.

Finally after searching for ways to figure out how to make my items each a panel itself (because your are right !!) ... I hang on XTemplates at the moment and hope there is a way to pass in xtypes into Tpl ... but where I found similar questions there where no answers.

For example 123lal how asks this in Ext.XTemplate Doc:

Is it possible to insert a "xtype : button" inside tpl, with other parameters like "action : download, name : dwnload, etc"

Does anyone know a way ... or have an initial Idea which direction to think ... to find a solution ?

So, one option is to create every item of your container within a panel with the property simpleDrag: true

Yes - I think this should be the final goal ~o)

Hope for more INPUT going to think - I promise to show you my final solution :)

Any Ideas ?

25 Dec 2013, 9:55 PM
Well, if you want to create a button inside your template, you should use standard HTML to create it...

'<tpl for=".">' +
'<div class="patient-source"><table><tbody>' +
'<tr><td class="patient-label">Name</td><td class="patient-name">{name}</td></tr>' +
'<tr><td class="patient-label">Address</td><td class="patient-name">{address}</td></tr>' +
'<tr><td class="patient-label">Telephone</td><td class="patient-name">{telephone}</td></tr>' +
'<tr><td class="patient-name"><input type="submit" value="Submit" action="test" onClick="console.log(Ext.fly(this))"></td></tr>' +
'</tbody></table></div>' +

26 Dec 2013, 9:50 AM
the button is not the Problem ;)
challenge is to bring xtypes into XTemplate combined with content...
But I think this is not planed for XTemplate.
The only way I think it could work is to put in something like this into XTemplate:

<div id=[{values.id}]><script>
// ExtJS code to create a Panel

I think this would be the only way ?

Any Ideas ? Would this be also your own solution if you have to do this ?

Thanks for you help - I am going to mark your Answer as best answer (if there is no better answer next)

26 Dec 2013, 1:41 PM
Now - I think it is to high for me :">

Maybe on other programmer can see my Problem...

Basd on discussion I build the following template

tpl: [
'<tpl for=".">',
'<div class="card" id="card-{[values.data.uniqueCardObjectId]}">',
'<div class="content" height="96" width="64" >',
'draggable: true,',
'draggGroup: \'cardDnDGroup\',',
'renderTo: Ext.getById(\'card-{[values.data.uniqueCardObjectId]}\'),',
'html: \'<img src="'+Config.Client.imageBaseUrl[0]+'/{[values.data.id]}.jpg" height="96" width="64">\'',
// 'card-{[values.data.id]}',

firebug shows a correct scripting tag:

Ext.onReady(function(){Ext.create('Ext.panel.Panel',{draggable: true,draggGroup: 'cardDnDGroup',renderTo: Ext.getById('card-0-0'),html: '<img src="./app/plugins/startrek1e/sets/setimages/general/jonathanarcher.jpg" height="96" width="64">']})})

But it does nothing...

Any Ideas ?
Maybe I need another trigger than Ext.onReady ?

26 Dec 2013, 1:56 PM
I haven't worked with XTemplates all that much but as far as I know, if you want to run scripts inside templates, you need to use {% %} instead of putting it between tags..like {% console.log('Testing...'); %}

26 Dec 2013, 5:28 PM
Part of Tpl:

Ext.define of View has to get this code in afterRender:

var me = this;
var script = Ext.get(me.el.id).select('script'); //tag <script> in tpl

Ext.each(script.elements, function(scriptEl){
var arr1 = [];
arr1 = eval(scriptEl.childNodes[0].data);

var pan = Ext.create('Ext.panel.Panel',{
draggable: true,
draggGroup: 'cardDnDGroup',

renderTo: Ext.get(arr1[0]), //card-{[values.data.uniqueCardObjectId]}
// arr1[1] is Config.Client.imageBaseUrl[0]+'/{[values.data.id]}.jpg
html: '<img src="'+arr1[1]+'" height="96" width="64">'

// Ext.get(arr1[0]).setHTML(pan.body.dom);

So this changes my DOM-Items into Panels :D

Thanks once more !!