Question

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

根据窗口的大小，所有项目可能直接放在工具栏上，或者其中一些项目可能会被放入＆＃34;更多＆＃34;菜单按钮。我需要指定其中一个按钮以具有某种优先级，因此它是最后一个放在＆＃34;更多＆＃34;按钮。甚至永远不要戴在上面。

有没有办法实现这个目标？

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工具栏：如何保持项目始终可以直接访问，永远不会放入＆＃34;更多＆＃34;菜单

2 个答案: