0

我有一个使用商店和模板填充的数据视图，因此该过程是动态的。然后我想让每个容器 Div（见模板）可拖动并使用以下代码。我本来希望容器 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;
    });


}
4

2 回答 2

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);
}
于 2013-06-06T04:56:56.917 回答
0

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

于 2013-03-21T03:00:22.447 回答