Answered: How does one drag an ExtJS Panel only by panelheader? - extjs

Question

I have a panel which contains items in its body, and I would like the panel itself to be draggable, but only when the user drags the panelheader. (I don't want the user to be able to drag the panel by clicking and dragging in the body). Is there a simple way to do this?
Here is my code for creating the panel:
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: true,
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
EDIT: I was able to figure out the problem and correct it. The solution has to do with the handle property of the Ext.drag.Source object. You have to specify the CSS handle of the element you want to be able to initiate the drag. In My case, the corrected code is as follows.
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: {handle: 'x-panelheader'}, // <- This is the part that needed to be changed
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();