0

プロセスが動的であるように、ストアとテンプレートを使用して設定されたデータビューがあります。次に、各コンテナー Div (テンプレートを参照) をドラッグ可能にして、次のコードを使用します。コンテナ div(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 に答える