1

次のテンプレートを使用した ExtJS DataView があります。

<ul>
    <tpl for=".">
        <li class="report-field" id="{listId}">
            {[this.getReorderLinks(values, xindex, xcount)]}
            <span class="field-title small" data-qtip="{displayName}">{displayName}</span>
            <i class="field-remove" title="' + deleteLabel + '"></i>
        </li>
    </tpl>
</ul>

これにより、アイテムの各リストは次のようになります。

アイテムのデータビュー

ユーザーがさまざまなアイコンをクリックして関連するアクションを実行し、順番に上下に移動して削除できる場所。

これらの項目は、ドラッグ アンド ドロップを使用してデータビューに追加されることに注意してください。別のソース データビュー コンテナーがあり、そこから項目をドラッグしてここに追加します。これらの上/下矢印は並べ替えで正常に機能していますが、内部でドラッグ アンド ドロップを使用してこれらのアイテムを並べ替えたいと考えています。

したがって、個々のアイテムを同じリージョンでドラッグおよびドロップ可能にするためrefreshに、次のように dataview のイベントを使用し、そこに DND を登録しました。

listeners: {
    'refresh': function(dataview, eOpts) {
        var fieldsList = Ext.query('.added-field');

        // Iterate over the list and make each item draggable/droppable.
        Ext.each(fieldsList,function(field){
            var dragSource,
                fieldId;

            fieldId = field.id;

            dragSource = new Ext.dd.DragSource(field, {
                isTarget  : false
            });

            dropZone = new Ext.dd.DropTarget(field);

            dragSource.dragData = {
                record: me.viewStore.findRecord('listId', fieldId),
                fieldId: fieldId
            };

            dropZone.notifyDrop = function(source, event, params) {
                var targetRecord = me.viewStore.findRecord('listId', fieldId),
                    targetRecordIdx = me.viewStore.indexOf(targetRecord),
                    sourceRecordIdx = me.viewStore.indexOf(params.record);

                //Perform rearrangement in the store.
                me.viewStore.removeAt(sourceRecordIdx);
                me.viewStore.insert(targetRecordIdx, params.record);
                return true;
            };
        });
    }

しかし、それは私に奇妙な振る舞いを与えています。「Person City」の上に「Person Email」をドラッグしようとすると、DataView が壊れて次のようになります。

壊れたデータビュー

また、Uncaught TypeError: Cannot read property 'internalId' of undefinedドロップ操作が完了すると取得します。特定のミリ秒まで呼び出しを延期removeAt()しようとさえしましinsert()たが、それでもうまくいきません。

どんな助けでも感謝します、ありがとう。

4

1 に答える 1

5

これは ExtJS 4 でのドラッグ ドロップでの悪い経験を思い出させます。とにかく、このプラグインを試してみてください。それ以外の場合は、ここに私が試したことがあります（スクロールはまだ処理されていません）（jsFiddle）：

new Ext.view.DragZone({
    view: view,
    ddGroup: 'test',
    dragText: 'test'
});

new Ext.view.DropZone({
    view: view,
    ddGroup: 'test',
    handleNodeDrop : function(data, record, position) {
        var view = this.view,
            store = view.getStore(),
            index, records, i, len;
        if (data.copy) {
            records = data.records;
            data.records = [];
            for (i = 0, len = records.length; i < len; i++) {
                data.records.push(records[i].copy(records[i].getId()));
            }
        } else {
            data.view.store.remove(data.records, data.view === view);
        }
        index = store.indexOf(record);
        if (position !== 'before') {
            index++;
        }
        store.insert(index, data.records);
        view.getSelectionModel().select(data.records);
    }
});
于 2013-08-30T14:01:25.100 に答える