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

Question

这是我的工具栏，我想在桌面的任何位置自由移动。 我需要为此改变什么？也许 xtype'toolbar' 或不同的 extend'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'
          //}

         ]
     }
    ]
}); 

Answer 1

创建一个固定宽度的窗口，并在其中添加一个工具栏。
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();