如何在 Extjs 表格布局中使用不同的对齐方式？

Question

我正在使用 Extjs 6.0（带有 Framework Codeigniter 3.0.3）。

我试图得到这样的东西：

+---------------------------+-------------+
|  something  |  something  |  something  |
+-------------+-------------+-------------+
|                    Label A|   Label B   |
+-------------+-------------+-------------+

我正在使用表格布局（标签 A 和 colspan 2）。

问题是我在标签 A 和标签 B 中需要不同的对齐方式（分别是右对齐和居中）。

有没有办法做到这一点？

这是代码：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Form Panel',
    bodyStyle: 'padding:5px 5px 0',
    width: 400,
    height: 200,
    layout: {
      type: 'table',
      columns: 3
    },
    items: [{
        xtype: 'label',
        text: '----First Row----',
        padding: 5
    }, {
        xtype: 'label',
        text: '----First Row----',
        padding: 5
    }, {
        xtype: 'label',
        text: '----First Row----',
        padding: 5
    },{
        xtype: 'label',
        text: 'Label A',
        padding: 5,
        colspan: 2,
    }, {
        xtype: 'label',
        text: 'Label B',
        padding: 5
    }],
});

对于标签A，我尝试添加（无效）：

• 对齐：'右'
• textAlign: '右'
• labelAlign: '右'

如果我添加：

layout: {
  type: 'table',
  columns: 3,
  tableAttrs: {
    style: {
        textAlign: 'right'
    }
  }
}

然后Label A和Label B都向右对齐，这不是我需要的。

Answer 1

您可以使用以下代码将标签 A 向右对齐：

{
        xtype: 'label',
        text: 'Label A',
        padding: 5,
        colspan: 2,
        style:{
            "float":"right"
        }
    },

Answer 2

标签有些特殊，大概是因为它们是为labelable 使用的目的而制作的。 label 旨在与字段一起使用，当您单击 label 时，field 将获得焦点。 field 的 labelable mixin 进行对齐（基于 labelAlign 配置），而 label 并不总是尊重您要求的布局。

虽然@Saloo 的答案似乎有效，但它可能会破坏其他主题和/或旧浏览器和/或不同版本的框架。

最好使用不同的文本显示方式。我已经开始使用container with the html configuration。使用容器，style:{textAlign:"right"} 可以按预期工作，并且由于“text-align”是本地 CSS 设置，不需要浏览器跳出框框思考，它应该足够安全，可以跨浏览器、跨主题、跨框架使用版本。