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

Question

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

我想得到这样的东西：

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

我正在使用 table 布局（带有 colspan 2 的标签 A）。

问题是我需要在标签 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，我尝试添加（但没有效果）：

对齐：'right'
文本对齐：'right'
标签对齐：'right'

如果我添加：

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

然后标签A和标签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 的答案似乎有效，但它是一个 hack，可能会破坏其他主题 and/or 较旧的浏览器 and/or 不同版本的框架。

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

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

How to use different aligning in Extjs Table Layout?

codeigniter

extjs

text-align