いくつかの制限付きで、ツリー パネルでドラッグ アンド ドロップ イベントを実行しようとしています。2 つのツリー ビューがあり、右側のツリーのコンテンツを左側のツリーにドラッグする必要がありますが、制限があります。1)ドラッグしたアイテムが左側のツリーにあるかどうかを確認する必要があります。はいの場合、タスクの完了を許可しません 2) ドラッグされたアイテムに子がある場合、子ノードを持つノードに関する通知が表示されます。ユーザーが [はい] をクリックすると、すべてのノードのコピーが許可され、そうでない場合は親ノードのみが許可されます。
次のようにJavaScriptでコードを記述しました(ユーザーインターフェイスにかみそりを使用していることに注意してください)
function (node, data, overModel, dropPosition, dropFunction) {
var record = data.records[0].data;
var nodeElem = data.item;
//before dropping item to the destination tree view we have to check if the item already exists
var exists = (nodeElem.find('.completed').length > 0);
if(exists)
{
return false;
}
//validate hierarchy level and parent node
var target = overModel;
//target.parentNode.data.id
var depth=target.getDepth();
if ( depth > 1) {
if (target.data.id != record.parentId) {
return false;
}
}
//check for existing nodes
var destTree = Ext.getCmp('tpDestination');
var found = findChildNodes(record.id, destTree);//dind childnodes checks the presence of chiild node
if (found) {
Ext.Msg.alert({
title: 'Alert',
msg: "The destination tree contains one of it's child domain. Please remove it's children and retry.",
buttons: Ext.MessageBox.OK
});
return false;
}
//allow copy of nodes. it overrides the move functionality
data.copy = true;
//show the confirmation message, if the node has children.
var isLeaf = record.leaf;
if (!isLeaf) {
//wait until confirmation complete
dropFunction.wait = true;
Ext.Msg.confirm({
title: 'Confirm',
msg: "Do you want to copy children also?",
buttons: Ext.MessageBox.YESNO,
fn: function (btn) {
if (btn == 'no') {
data.copyChildren = false;
}
dropFunction.processDrop();
}
});
}
data.dropNode = data.records[0];
return true; };
完了は右側のパネルのノードクラスであり、コードはドラッグされた要素に完了したクラスが存在するかどうかを確認することになっていますが、それは機能していません。ユーザーが「いいえ」をクリックしても、子ノードに沿ってすべてのノードが追加されます。