CODEWITHSUNDEEP
javascriptextjs
user1477388
user1477388

Reputation: 21440

How to align header items to the right in ExtJs

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?

Upvotes: 1

Views: 2464

Answers (1)

Akatum
Akatum

Reputation: 4016

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
}

Upvotes: 3

Related Questions