Sencha Touch сделать динамические элементы Dataview draggable

Question

У меня есть dataview, который заполняется с использованием магазина и шаблона, поэтому процесс динамический. Затем я хочу, чтобы каждый из контейнеров Divs (см. Шаблон) перетащил и использовал следующий код. Я бы ожидал, что только контейнерные divs (image + name) будут перетаскиваться, но вместо этого весь DataView перетаскивается. Интересно, что я делаю неправильно?

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

Вы используете идентификатор жесткого кода в шаблоне элемента. В итоге вы получите несколько элементов с одинаковым идентификатором. Вы должны сменить камеру с id на класс, или если вы действительно привязаны к вашему ID, используйте идентификатор записи, чтобы каждый идентификатор div был уникальным.

Answer 2

Это проблема с жизненным циклом компонента, вы должны подождать, пока рендерит dataview, поэтому вы можете получить доступ к элементам.

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); 
}