如何在ExtJs中将标题项对齐到右侧

Question

This is my header with it's items; as you can see I tried adding a style property but it doesn't help - the link is still aligned to the left whereas I want it to align right:

items: [
{
    region: 'north',
    xtype: 'header',
    items:[
        {
            xtype: 'component',
            autoEl: {
                html: '<a href="#">View All Services</a>'
            },
            style: {
                textAlign: 'right',
                left: 'auto',
                right: '0'
            },
            listeners: {
                render: function(component) {
                    component.getEl().on('click', function(e) {
                        alert('test');
                    });
                }
            }
        }
    ],
    padding: 6
}

How can I align my items to the right in my header?

Answer 1

Set header titlePosition configuration property to 0 . By default items in header component are added before header title. If you set titlePosition config to 0 , items will be added after title:

items: [
{
    region: 'north',
    xtype: 'header',
    titlePosition: 0,
    items:[
        {
            xtype: 'component',
            autoEl: {
                html: '<a href="#">View All Services</a>'
            },
            listeners: {
                render: function(component) {
                    component.getEl().on('click', function(e) {
                        alert('test');
                    });
                }
            }
        }
    ],
    padding: 6
}