Question

我有一个使用商店和模板填充的数据视图，因此该过程是动态的。然后我想让每个容器Div（请参阅模板）可拖动并使用以下代码。我希望只有容器div（图像+名称）可以拖动，但整个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

组件的生命周期存在问题，您必须等到数据视图呈现后才能访问元素。

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

您正在项目模板上使用硬编码元素ID。您将得到具有相同ID的多个元素。您应该将camimage从id更改为类，或者如果您真的附加到您的ID，请使用记录标识符，以便每个div ID都是唯一的。

Sencha Touch使Dataview动态元素可拖动

2 个答案: