Javascript 是否可以使用Ext.js实现可移动工具栏，如果可以，如何使用我的代码实现？

这是我的工具栏，我想在桌面的任何位置自由移动。 我需要换什么？可能是X键入“工具栏”或其他扩展“Ext.panel.panel”

Ext.define('test.view.desktop.Toolbar', {
    bodyStyle: "background: #CAE1FF; border: 4px solid red;",
    width: 500,
    height: 200,
    extend: 'Ext.panel.Panel',
    title: 'test',

    alias: "widget.testtoolbarX",
    requires: [
    "Ext.form.FieldSet"
    ],
    dockedItems: [
     {

         xtype: 'toolbar',
         dock: 'top',
         items: [
          {

              xtype: 'tbtext',
              text: '<b style="font-size: 20px; margin-left: 300px; color: red;">I am Toolbar</b>',

          },
          {
              xtype: 'tbfill',



          },

           {
               text: 'Report',
               menu: {
                   items: [
                       {
                           text: 'Export'
                           ,
                           menu: {
                               items: [
                                   {
                                       text: 'PDF'

                                   }, {
                                       text: 'Excel'
                                   }
                                   , {
                                       text: 'CSV'
                                   }
                               ]
                           }

                       }, {
                           text: 'Filter'
                       }
                   ]
               }
           },
            {
                xtype: 'cycle',

                text: 'File',
                menu: {
                    xtype: 'menu',
                    width: 120,
                    items: [

                     {
                         text: 'Upload'
                     },
                     {
                         text: 'Share'
                     },
                     {
                         text: 'Popout'
                     }
                    ]
                }
            },
          {
              xtype: 'button',
              text: 'Help',
              url: 'http://test/faq.html',
              //baseParams: {
              //    q: 'html+anchor+tag'
              //},
              tooltip: 'Get the answers to frequently asked questions about'
          }
          ,
          //{
          //    xtype: 'htmleditor',
          //    text: 'Help'
          //}

         ]
     }
    ]
}); 

Ext.define（'test.view.desktop.Toolbar'{
车身风格：“背景：#CAE1FF；边框：4px纯红；”，
宽度：500，
身高：200，
扩展：“Ext.panel.panel”，
标题:"测试",，
别名：“widget.testtoolbarX”，
要求：[
“Ext.form.FieldSet”
],
摘要：[
{
xtype:'工具栏'，
码头：“顶部”，
项目：[
{
xtype:'tbtext'，
文本：“我是工具栏”，
},
{
xtype:'tbfill'，
},
{
文本：“报告”，
菜单：{
项目：[
{
文本：“导出”
,
菜单：{
项目：[
{
文本：“PDF”
}, {
文本：“Excel”
}
, {
文本：“CSV”
}
]
}
}, {
文本：“过滤器”
}
]
}
},
{
xtype:'循环'，
文本：“文件”，
菜单：{
xtype:'菜单'，
宽度：120，
项目：[
{
文本：“上传”
},
{
文本：“共享”
},
{
文本：“弹出”
}
]
}
},
{
xtype:'按钮'，
文本：“帮助”，
网址：'http://test/faq.html',
//基本参数：{
//q:'html+锚定+标记'
//},
工具提示：“获取有关的常见问题的答案”
}
,
//{
//xtype:'htmleditor'，
//文本：“帮助”
//}
]
}
]
}); 

实现这一点的简单方法是：

将工具栏添加到面板，将面板添加到窗口

播放窗口的大小，以便只能看到工具栏

在窗口的配置中，添加

headerPosition:“right”

以将标题栏/标题移到窗口的右侧

---

现在，您有了一个工具栏，可以通过右边的手柄（窗口的标题栏）在桌面上的任何位置拖动它。

创建一个固定宽度的窗口，并向其中添加工具栏。
Kyle Fransham指出了这一点，但我将用一段代码片段来展示：

Ext.create('Ext.window.Window', {
    layout: 'fit',
    width   : 500,
    dockedItems: {
        xtype: 'toolbar',
        items: [{
                text: 'Button'
            },
            '->',
            {
                xtype    : 'textfield',
                name     : 'field1',
                emptyText: 'enter search term'
            },              
            '-','text 1', 
            { xtype: 'tbspacer' },
            'text 2'
        ]
    }
}).show();

---

窗户到底是什么？我正在使用panel和desktopA window，它只是另一个Ext类。它的行为就像你所期望的，作为一个窗口。医生在这里：