Sencha Touch make Dataview dynamic elements draggable - sencha-touch

Question

I have a dataview that is populated using a store and template so the process is dynamic. I then want to make each of the container Divs (see template) draggable and use the following code. I would have expected just the container divs(image + name) to be draggable but instead the whole DataView is draggable. Was wondering what i am doing wrong?
Ext.define('MyApp.view.allImages', { extend: 'Ext.dataview.DataView',
xtype: 'cams',
requires: [
'MyApp.store.images'
],
config: {
title: 'Test',
store: 'images',
baseCls: 'camera-list',
itemTpl: [
'<div id="camimage">',
'<div class="image" style="background-image:url({fullimage})"></div>',
'<div class="name">{address}</div>',
'</div>'
].join(''),
records: null,
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Gainesville'
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'button',
text: 'Path1'
},
{
xtype: 'button',
text: 'Path2'
},
{
xtype: 'button',
text: 'Path3'
}
]
}
]
},
initialize: function () {
this.callParent(arguments);
//get the divs that we want to make draggable
var images = this.element.select("div[id='camimage']");
Ext.each(images.elements, function (imageElement) {
imageElement.draggable = true;
});
}

Answer 1

It is a problem with the life cicle of the component, you must wait until the dataview has rendered, so you can access the elements.
initialize: function () {
this.callParent(arguments);
var me = this;
//get the divs that we want to make draggable
//
setTimeout(function (argument) {
var images = me.element.select("div.image-dataview-item");
Ext.each(images.elements, function (imageElement) {
var draggable = new Ext.util.Draggable({
element: imageElement,
listeners: {
dragstart: function(self, e, startX, startY) {
console.log("test dragStart[" + startX + ":" + startY + "]");
},
drag: function(self, e, newX, newY) {
console.log("test drag[" + newX + ":" + newY + "]");
},
dragend: function(self, e, endX, endY) {
console.log("test dragend[" + endX + ":" + endY + "]");
}
}
});
draggable.setConstraint({
min: { x: -Infinity, y: -Infinity },
max: { x: Infinity, y: Infinity }
});
draggable.group = 'base';// Default group for droppable
draggable.revert = true;
});
},1000);
}

Answer 2

You are using a hardcoded element ID on an item template. You will end up with multiple elements with the same ID. You should change camimage from an id to a class, or if you are really attached to your ID use the record identifier so each div ID is unique.