Ext.js：如何在标题的左侧对齐按钮？

Question

请参见此处的小提琴：https://fiddle.sencha.com/#view/editor&fiddle/1u71

如何在Extjs标头上向左对齐“测试”按钮？

[当我们删除'title'时，它将呈现为带有＆nbsp内容的div标签。请更新解决方案，因为我已经使用过“ floating：true”，它将测试按钮向左移动，但完整的标题位于页面中间！

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.onReady(function () {
            Ext.create('Ext.panel.Panel', {
                width: 500,
                height: 500,
                collapsible: true,
                renderTo: Ext.getBody(),
                header: {
                    titlePosition: 0,
                    title: "title",
                    items: [{
                        xtype: 'button',
                        text: 'test',
                        cls: 'lefty'
                    }]
                }
            });
        });
    }
});

Answer 1

在标题上设置titlePosition: 1。这意味着按钮将首先显示，然后是标题，然后是工具。

Answer 2

在按钮xtype块之后添加了tbspacer块，以将按钮位置向左移动。 width是用于响应式设计的%值。（可以保留title或删除）

   `header: {
              items: [
                   {
                    xtype: 'button',
                    text: 'test ONE',
                    cls: 'lefty'
                   },
                   {
                    xtype:'tbspacer',
                    width: '80%' //change percentage to desired button position 
                   },
                   {
                    xtype: 'button',
                    text: 'test TWO',
                    cls: 'lefty'
                   },
              ],
            }`