1

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

         ]
     }
    ]
});
4

2 回答 2

1

一个简单的方法是：

  1. 将工具栏添加到面板，并将面板添加到窗口。
  2. 调整窗口的大小，以便只能看到工具栏。
  3. 在窗口的配置中，添加headerPosition: 'right'以将标题栏/标题移到窗口的右侧。

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

于 2013-08-07T12:53:06.647 回答
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();
于 2013-08-07T15:05:06.347 回答