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

Question

这是我的标题和它的项目；如您所见，我尝试添加 style 属性，但无济于事 - 链接仍左对齐，而我希望它右对齐：

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
}

如何将我的项目与标题中的右侧对齐？

Answer 1

将标头titlePosition 配置属性设置为0。默认情况下，标题组件中的项目添加在 标题标题之前。如果您将titlePosition config 设置为0，项目将添加到 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
}