extjs - 回答：如何仅通过 panelheader 拖动 ExtJS 面板？

Question

我有一个面板，其中包含其正文中的项目，我希望面板本身是可拖动的，但仅当用户拖动面板标题时。（我不希望用户能够通过在正文中单击和拖动来拖动面板）。有没有一种简单的方法可以做到这一点？

这是我创建面板的代码：

      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();

编辑：我能够找出问题并纠正它。该解决方案与 Ext.drag.Source 对象的 handle 属性有关。您必须指定您希望能够启动拖动的元素的 CSS 句柄。在我的情况下，更正的代码如下。

      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();