私は過去数ヶ月からそれに取り組み始めました。ドラッグ アンド ドロップ イベントの処理に問題があります。
2 つのグリッドを並べて配置し、左側のグリッド (グリッド A) から右側のグリッド (グリッド B) にドラッグ アンド ドロップ操作を実行しています。Grid BでBeforeDropとDropイベントの両方を使用しています。Grid AからGrid Bへのデータのドラッグ アンド ドロップで、コンボ ボックスを含むカスタムウィンドウを表示しています。
ウィンドウの表示とSelectイベントを使用したコンボ ボックスでの値の選択は、 BeforeDropイベントで行われ、グリッド B のストアのリロードはDropイベントで行われます。
問題は、グリッド A からグリッド B にデータをドラッグ アンド ドロップすると、ウィンドウがポップアップする場所でBeforeDropイベントがトリガーされ、同時にコンボ ボックスのデータを選択する前に、Dropイベントもトリガーされてグリッド B のストアがリロードされることです。背景。
コンボ ボックスで項目を選択した後にDropイベントをトリガーしたいです。ウィンドウが表示されたら、トリガープロセスを停止する方法はありますか?
どんな助けでも大歓迎です..
ここにいくつかのコードがあります：
ドラッグ ドロップ イベントとともに 2 つのグリッドを含むパネル
Ext.define('MyApp.view.MainPanel', {
extend: 'Ext.panel.Panel',
frame: false,
height: 708,
width: 1150,
layout: {
type: 'border'
},
title: 'MyApp',
initComponent: function () {
var me = this;
var GridADragDrop = Ext.create('Ext.grid.plugin.DragDrop', {
ptype: 'gridviewdragdrop',
dragGroup: 'GridADDGroup',
dropGroup: ''
});
var GridBDragDrop = Ext.create('Ext.grid.plugin.DragDrop', {
ptype: 'gridviewdragdrop',
dragGroup: 'GridADDGroup',
dropGroup: 'GridADDGroup'
});
Ext.applyIf(me, {
items: [{
xtype: 'grid',
id: 'gridb',
title: 'Grid B',
store: 'GridBStore',
viewConfig: {
id: 'Bview',
plugins: [GridBDragDrop],
/*Both Events have been used for Grid B*/
listeners: {
beforedrop: {
fn: me.onBeforeDrop,
scope: me
},
drop: {
fn: me.onDrop,
scope: me
}
}
},
columns: [{
xtype: 'numbercolumn',
dataIndex: 'id',
text: 'ID'
}, {
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
}]
}, {
xtype: 'grid',
id: 'grida',
title: 'Grid A',
store: 'GridAStore',
viewConfig: {
id: 'Aview',
plugins: [GridADragDrop]
},
columns: [{
xtype: 'numbercolumn',
dataIndex: 'id',
text: 'ID'
}, {
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
}]
}]
});
me.callParent(arguments);
},
onBeforeDrop: function (node, data, overModel, dropPosition, dropFunction, options) {
console.log("The before drop event is triggered!!");
// Creating the window
var window = Ext.create('MyApp.Window');
// Getting the combo box object from the window object
var combobox = window.items.items[0];
// Adding 'select' listener to the combo box
combobox.on('select', function (combo, records, options) {
// I do some stuff here
//...
// Once finished I destroy window
window.destroy();
});
// Display the window on item drop
window.show();
},
onDrop: function (node, data, overModel, dropPosition, options) {
console.log("The drop event is triggered!!");
var GridB = Ext.getCmp('gridb'); // Grid B
var GridBStore = GridB.getStore(); // Grid B store
//Reload the GridB store once the item has been dropped
GridBStore.reload();
}
});
私のカスタムウィンドウ:
Ext.define('MyApp.Window', {
extend: 'Ext.window.Window',
height: 82,
hidden: false,
id: 'droptaskwindow',
width: 171,
layout: {
type: 'absolute'
},
title: 'Create Task',
modal: true,
expandOnShow: false,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'combobox',
x: 10,
y: 10,
id: 'combodroptask',
width: 130,
fieldLabel: 'ID',
labelPad: 1,
labelWidth: 45,
allowBlank: false,
editable: false,
displayField: 'Name',
}]
});
me.callParent(arguments);
},
});
ドラッグ アンド ドロップするとすぐにウィンドウが表示されますが、コンソールには両方のイベントが実行されていることがわかります。
ドロップ前イベント発動!!
ドロップイベント発動!!
注: 単純な警告メッセージを表示すると、BEFORE イベントのみがトリガーされ、[OK] をクリックしない限り DROP イベントはトリガーされないことに気付きました。これは、ウィンドウが表示されたときに機能させたい方法です。
アラート メッセージの動作:
onBeforeDrop: function(node, data, overModel, dropPosition, dropFunction, options) {
console.log("The before drop event is triggered!!");
alert("Dropping..");// IT WORKS!! It Does not allow DROP event to execute..unless OK is clicked
Ext.Msg.alert('Status', 'Dropping..'); //This doesn't work..same as my window
},