ExtJS工具栏：如何保持项目始终可直接访问，永远不要放在"more"菜单中

Question

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

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

有什么办法可以做到这一点吗？

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，因此它可以拉伸。