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

is it possible to implement moveable Toolbar with Ext.js, if yes, how to do that with my code?

本文关键字：实现如果可以何用代码我的工具栏可移动 Ext js 是否更新时间：2023-09-26

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

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

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

将工具栏添加到面板，将面板添加到窗口
播放窗口的大小，以便只能看到工具栏
在窗口的配置中，添加headerPosition: 'right'以将标题栏/标题移到窗口的右侧

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