0

2 つのグリッドが並んでいます。左側のグリッドにはユーザーが選択できるタグのリストがあり、右側のグリッドは空なので、ユーザーは必要なタグをそこにドラッグできます。

両方のグリッドのプラグイン コードは次のとおりです。

viewConfig: {
    plugins: [
        Ext.create('Ext.grid.plugin.DragDrop', {
            ddGroup: 'selectedTags'
        })
    ]
}

そこで、ユーザーがドラッグできるタグを 5 つだけに制限したかったので、次のコードを右側のグリッドに追加しました。

listeners: {
    beforedrop: {
        fn: function() {
            if (grid.getStore().data.items.length > 4) {
                dropHandlers.cancelDrop();
            }
        },
        scope: me
    }
}

これは完全に機能していますが、アクションが許可されているかのように緑色の線を表示するのではなく、アイテムがグリッド上にドラッグされたときに NO-DROP アイコンを表示することを望んでいました。

ありがとう、

4

2 に答える 2

1

この解決策をしばらく探した後、私はついにそれを理解しました。

Target Grid の dropZone に 2 つのメソッドを追加する必要があります notifyOver。onNodeDrop

私の問題の解決策は、以下のコードです。

Ext.create('Ext.grid.Panel', {
    store: myStore,
    columns: [columns],
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorganize',
            pluginId : 'dragNdrop',
            dropZone:{
                notifyOver:function(source, e, data){
                    var store = this.view.ownerCt.getStore();

                    return store.getCount()<5?this.dropAllowed:this.dropNotAllowed
                },
                onNodeDrop:function(targetNode,dragZone,e,data){
                    var sourceStore = dragZone.view.ownerCt.getStore(),
                        targetStore = this.view.ownerCt.getStore(),
                        isDropValid = targetStore.getCount()<5;
                    if(isDropValid){
                        sourceStore.remove(data.records[0])
                        targetStore.add(data.records[0]);
                    }

                    return isDropValid;
                }
            }
        }
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
 });
于 2014-10-17T18:16:56.580 に答える