ExtJS 工具栏：如何让项目始终可直接访问，从不放入 "more" 菜单

Question

我的面板顶部有一个 ExtJS 工具栏，它可以有 5 到 10 个操作（按钮），加上一个搜索文本字段作为最后一项。

根据 window 的大小，所有项目都可以直接放在工具栏上，或者其中一些项目可能会放入 "more" 菜单按钮中。我需要指定其中一个按钮具有某种优先级，因此它是最后一个放在 "more" 按钮上的按钮。甚至永远不会穿上它。

有什么办法可以实现吗？

Answer 1

解法：

添加带有代码的项目。我不知道这是否正是你的情况，但我经常使用它来排列工具栏中的按钮：

工作示例：

Ext.onReady(function(){

    Ext.QuickTips.init();
    Ext.FocusManager.enable();
    Ext.Ajax.timeout = 100 * 1000;

    Ext.define('Trnd.TestWindow', {
        extend: 'Ext.window.Window',

        closeAction: 'destroy',
        border: false,
        width: 400,
        height: 500,
        modal: true,
        closable: true,
        resizable: true,
        layout: 'fit',

        fillToolbar: function() {
            var me = this;

            me.toolbar.add(me.button5);
            me.toolbar.add(me.button1);
            me.toolbar.add(me.button2);
            me.toolbar.add(me.button3);
            me.toolbar.add(me.edit);
            me.toolbar.add(me.button4);
        },

        initComponent: function() {
            var me = this;
            me.callParent(arguments);

            me.button1 = Ext.create('Ext.button.Button', {
                text: 'Button 1'
            });
            me.button2 = Ext.create('Ext.button.Button', {
                text: 'Button 2'
            });
            me.button3 = Ext.create('Ext.button.Button', {
                text: 'Button 3'
            });
            me.button4 = Ext.create('Ext.button.Button', {
                text: 'Button 4'
            });
            me.button5 = Ext.create('Ext.button.Button', {
                text: 'Button 5'
            });
            me.edit = Ext.create('Ext.form.TextField', {
                text: 'Edit'
            });

            me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
                enableOverflow: true,
                items: []
            });

            me.panel = Ext.create('Ext.panel.Panel', {
                tbar: me.toolbar
            });

            me.add(me.panel);

            me.fillToolbar();
        }

    }); 


    var win = new Trnd.TestWindow({

    });
    win.show();

});

备注：

使用 ExtJS 4.2 测试

Answer 2

我通过将工具栏包装在这样的容器中解决了这个问题：

tbar: [
  {
     xtype: 'container',
     layout: {
       type: 'hbox',
       pack: 'start',
       align: 'stretch'
     },
     items: [
       {
          xtype: 'mail-compose-toolbar',
          flex: 1
       },
       {
         xtype: 'mail-compose-search',
         itemId: 'mailComposeSearch',
         width: 200
       }
     ]
  }
]

搜索字段的宽度是固定的，工具栏有一个 flex:1，所以它会伸展。

ExtJS 工具栏：如何让项目始终可直接访问，从不放入 "more" 菜单

ExtJS Toolbar: how keep an item always directly accesible, never put in the "more" menu

javascript

extjs

extjs4.2