Sencha Touch使Dataview動態元素可拖動

我有一個使用商店和模板填充的數據視圖，因此過程是動態的。然後我想讓每個容器Divs（請參閱模板）可拖動並使用下面的代碼。我會期望只是容器div（圖像+名稱）是可拖動的，而整個DataView是可拖動的。想知道我做錯了什麼？Sencha Touch使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; 
    }); 


}

來源

2013-03-20 John Mcfetridge

您正在項目模板上使用硬編碼的元素ID。您將以多個具有相同ID的元素結束。你應該改變camimage從一個id到一個類，或者如果你真的連接到你的ID使用記錄標識符，因此每個div ID是唯一的。

來源

2013-03-21 03:00:22 OhmzTech

感謝解決問題的一部分，但整個包含DataView移動的行爲是通過將可滾動配置設置爲false來解決的。當然這有巨大的副作用，但另一場戰鬥，因爲我認爲Sencha可拖動代碼有點弱 – 2013-03-24 18:57:17

這是組件的生命週期的問題，您必須等待，直到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); 
}

來源

2013-06-06 04:56:56 user2458204

Sencha Touch使Dataview動態元素可拖動

回答

相關問題