PDA

View Full Version : How to implement auto scrolling when dragging outside grid area?



meir.rivkin
1 Oct 2017, 1:28 AM
I have simple window with 2 grid panels side by side which support drag and drop (one to another and inside each grid).
I couldn't make the auto scroll (vertical) to work when dragging row above the 1st row or below the last row in the grid.
thanks.



this.mainWin = Ext.create('Ext.window.Window', {
layout: 'centered',
title: 'Blotter Fields',
resizable: false,
closeAction: 'hide',
hidden: true,
shadow: true,
tbar: [comboCategories],
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Cancel',
listeners: {
click: {
fn: this.onAcceptSettings,
scope: this
}
}
},
{
xtype: 'button',
text: 'OK',
listeners: {
click: {
fn: this.onCancelSettings,
scope: this
}
}
}
]
},
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'start',
type: 'hbox'
},
items: [{
xtype: 'checkbox',
hidden: this.detailsCustomOptions.showDetailsFieldsOption == false,
margin: '0 10 0 20',
boxLabel: 'Show Details field',
listeners: {
click: {
fn: this.onShowDetailsField,
scope: this
}
}
}, {
xtype: 'checkbox',
margin: '0 10 0 20',
hidden: this.detailsCustomOptions.showUserCustomFieldsOptions == false,
boxLabel: 'Show custom fields',
listeners: {
click: {
fn: this.onShowCustomFields,
scope: this
}
}
}]
}],
items: [{
store: availableFields,
title: 'Available Fields',
xtype: 'grid',
hideHeaders: true,
multiSelect: true,
autoScroll: true,
markDirty: false,
columns: [
{ dataIndex: 'item', flex: 1 }
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
containerScroll: {
vthresh: 200 // this will use threshold of 100 pixels,
}
},
listeners: {
drop: function (node, data) {


}
}
}
}, {
store: selectedFields,
title: 'Selected Fields',
xtype: 'grid',
hideHeaders: true,
autoScroll: true,
multiSelect: true,
markDirty: false,
columns: [
{ dataIndex: 'item', flex: 1 }
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
containerScroll: true
},
listeners: {
drop: function (node, data) {


}
}
}
}],
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
height: 200,
margin: 8,
width: 200
}
});