2

やあ、

ドラッグできるレコードとドロップできる場所を制御することはできますか（ドラッグ操作を最初から、またはホバー中の途中で抑制します）？

私が詳細に必要としているのは次のとおりです。

私はいくつかのグループ（たとえば男性と女性）のグリッドを持っていて、グループ「女性」内のd＆dをアクティブにしたいだけです。これは2つのことを意味します。

1.）グループ「female」（リサ）からレコードをドラッグし始めました。ドラッグがグループ'female'の外側（グループ'male' ...の上）になるとすぐに、グリッドの境界の外側にドラッグしたときのようなエラー状態が表示されます。
エラー状態の例

2.）グループ「男性」からアイテムのドラッグを開始することは、まったく不可能であるか（d＆dパネルを表示しないでください）、または上記のようなエラー状態を最初から表示し、「正しい」に変更しないでください。 -州。

ありがとう、

マイク

4

2 に答える 2

1

extのソースを調べた後、機能するが完全ではない解決策を見つけました。

「drop-allowed-indication」は、treeviewdragdrop-pluginのonViewRenderで作成された基になるDropZoneによって処理できます。これは文書化されていませんが、プラグインのソースコードで確認できます。

（少なくともこの例では）実行する必要があるのは、DropZoneのonNodeOver-＆onContainerOver-メソッドをオーバーライド/拡張​​して、drop-not-allowed-またはdrop-allowed-indicationに適切なcssクラスを返すことです。

Ext.override(Ext.view.DropZone, {
    onNodeOver: function(nodeData, source, e, data) {
        if (data && data.records && data.records[0]) {
            // The check should be better specified, e.g. a
            // female with the name 'Malena' would be recognized as male!
            if (nodeData.innerHTML.indexOf(data.records[0].get('sex')) < 0) {
                return this.dropNotAllowed;
            }
        }
        return this.callOverridden([nodeData, source, e, data]);
    },
    onContainerOver: function(source, e, data) {
        return this.dropNotAllowed;
    }
});

実例： http： //jsfiddle.net/suamikim/auXdQ/

このソリューションについて私が気に入らないことがいくつかあります。

  1. オーバーライドにより、アプリケーション内のすべてのDropZoneの動作が（定義ごとに...）変更されます。1つのグリッドの特定のDropZoneのみをオーバーライド/拡張​​するにはどうすればよいですか？

    私は次のことを試しました：

    • グリッドビューがレンダリングされた後、dropZoneにインターセプターを追加します。http：//jsfiddle.net/suamikim/uv8tX/これ

      は、正しいdrop-allowed-indicationを示しているため、最初は機能しているように見えますが、インジケーターがあったとしてもレコードをドロップします。許可されていないことを示します（常に「緑色の線」が表示されます...）

    • treeviewdragdrop-pluginを拡張する新しいdnd-pluginを定義し、作成後にdropZoneのonNodeOver-methodをオーバーライドします。http：//jsfiddle.net/suamikim/5v67W/この

      種類は、interceptation-methodとは逆のことを行います。また、正しい表示が表示されますが、「緑色の線」が表示されることはなく、どこにでもドロップすることはできません...

  2. オーバーライドしているクラス（Ext.view.DropZone）は、ドキュメントでプライベートとしてマークされており、直接使用しないでください...

これらの2つの問題についてのコメントと、さらに良い解決策をいただければ幸いです。

ありがとう、mik

編集：

元のgridviewdragdrop-pluginを拡張する新しいdnd-pluginを定義したバージョンを調整しました。「魔法」は、gridviewdropzoneを拡張し、onNodeOverメソッドを単にオーバーライドするのではなく拡張することでした。

これを行う必要があるのは、現在callParentによって呼び出されている元のonNodeOverメソッドが「緑色の線」を処理し、最終的にドロップを許可するためです。

私の拡張gridviewdragdrop-pluginが今行う唯一のことは、onViewRender-methodで標準のgridviewdropzoneの代わりに新しいdropzone-classのインスタンスを作成することです。
これはこれまでのところ合理的な方法のようです。

// Extend the treeview dropzone
Ext.define('ExtendedGridViewDropZone', {
    extend: 'Ext.grid.ViewDropZone',

    onNodeOver: function(nodeData, source, e, data) {
        if (data && data.records && data.records[0]) {
            // The check should be specified, e.g. a female with the name 'Malena' would be recognized as male!
            if (nodeData.innerHTML.indexOf(data.records[0].get('sex')) < 0) {
                    return this.dropNotAllowed;
            }
        }

        return this.callParent(arguments);
    },
    onContainerOver: function(source, e, data) {
        return this.dropNotAllowed;
    }
});

Ext.define('ExtendedGridDnD', {
    extend: 'Ext.grid.plugin.DragDrop',
    alias: 'plugin.extendeddnd',

    onViewRender: function(view) {
        this.callParent(arguments);

        // Create a instance of ExtendedGridViewDropZone instead of Ext.grid.ViewDropZone
        this.dropZone = Ext.create('ExtendedGridViewDropZone', {
            view: view,
            ddGroup: this.dropGroup || this.ddGroup
        });
    }
});

実例： http： //jsfiddle.net/5v67W/1/

それでもなお、もっと簡単にできるように感じられるので、さまざまなアプローチに感謝します...

于 2012-08-30T12:55:30.917 に答える
1

Ext5と6ではこのように行うことができます

ツリーパネルの定義：

 listeners: {        
        viewready           : 'onViewReady'
    }

ViewControllerで：

onViewReady       : function (tree) {
    var view = tree.getView(),
        dd = view.findPlugin('treeviewdragdrop'),
        rec;

    dd.dropZone.onNodeOver = function (data, e) {
        rec = view.getRecord(e.getTarget(view.itemSelector));
        return rec.get('customProperty') === 'someValue' ? this.dropAllowed : this.dropNotAllowed;
    }
},

参照https://www.sencha.com/forum/showthread.php?282685https://www.sencha.com/blog/declarative-listeners-in-ext-js-5/ _

于 2016-10-03T19:40:14.563 に答える