Ext.js: Как выровнять кнопку по левому краю заголовка?

Question

См. Здесь: https://fiddle.sencha.com/#view/editor&fiddle/1u71

Как выровнять кнопку "test" по левому краю заголовка Extjs?

Когда мы удаляем заголовок, он отображается как тег div с содержимым. Пожалуйста, обновите решение, потому что я использовал «float: 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

Добавлен блок tbspacer после блока кнопки xtype для перемещения позиции кнопки влево. 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'
                   },
              ],
            }

Answer 2

Установите titlePosition: 1 в заголовке. Это будет означать, что сначала пойдет кнопка, затем название, затем инструменты.