javascript - Extjs 仅将单元格文本向右对齐

Question

我需要将单元格文本对齐到右侧。

{
            xtype : 'numbercolumn',
            dataIndex : 'lineAmount',
            id : 'lineAmount',
            header : 'Net Line amount',
            sortable : true,
            width : 150,
            summaryType : 'sum',
            css: 'text-align: rigth;',
            summaryRenderer : Ext.util.renderers.summary.sum,
            editor : {
                xtype : 'numberfield',
                allowBlank : false
            }

添加 align 属性对我不起作用，因为它还对齐标题文本

Answer 1

有一个numbercolumn名为align. 就用那个。

每当您遇到困难时，请参阅专为初学者精心设计的 secha 文档。

我假设您是初学者并向您解释如何使用文档..为了您的清晰理解：

• 首先转到搜索字段，搜索组件、方法或事件或其他内容。

---

---

• 在您的情况下，假设您搜索了“ numbercolumn ”，那么您可以看到以下窗口，其中显示了所有配置、属性、方法等。只需将鼠标悬停在它们上，就知道“ numbercolumn ”与什么相关。
• 在您的情况下，您正在寻找一个将文本向右对齐的配置。那么你主要是在寻找 txtAlign、align、textAlign 等关键词。
• 因此，您会找到一个名为“ align ”的配置。只需单击它以了解更多信息。

---

---

• 在了解了 cofig " align " 之后，您可能想要对其进行测试。为此，文档提供了内联代码编辑器，如下图所示。
• 代码编辑器有两个选项卡，“代码编辑器”和“实时预览”。话说明了一切。
• 只需在“代码编辑器”选项卡中添加您的更改，然后在“实时预览”选项卡中查看您的结果。

---

• 例如，align: "right"在下面的“代码编辑器”中添加代码。

---

---

更新

CSS：

.columnAlign{
     text-align: right;
}

extjs

tdCls: "columnAlign",

Answer 2

正如回答 Mr_Green 您可以使用 align 将文本向右或向左 对齐。要使标题保持居中对齐，请使用 css as ：

.x-column-header-inner{
    text-align:center;
 }

更新：

.....//

  {
    xtype : 'grid',
    cls   : 'gridCss',
    ...//other configs
  }

.....//

在您的 app.css 文件中：

 .gridCss .x-column-header-inner{
    text-align:center;
 }

在你的 index.jsp

<link rel="stylesheet" type="text/css" href="app/resources/css/app.css">

Answer 3

实际上，感谢两个人的帖子，这对我帮助很大。我自己找到了一种解决方案。

我需要将 id 属性添加到我的列中。例如 ：

{
            xtype : 'numbercolumn',
            dataIndex : 'lineAmount',
            id : 'lineAmount',
            header : 'Net Line amount',

        }

然后它有自己的css类，例如： .x-grid3-td-lineAmount所以我在这些类中添加了建议的css，它现在对我来说工作正常

.x-grid3-hd-inner{
    text-align: left;
 }
 .x-grid3-hd-lineAmount{
    text-align: left;
 }
 .x-grid3-td-lineAmount{
    text-align: right;
 }
 .x-grid3-hd-taxAmount{
    text-align: left;
 }
 .x-grid3-td-taxAmount{
    text-align: right;
 }
 .x-grid3-hd-invoiceAmount{
    text-align: left;
 }
 .x-grid3-td-invoiceAmount{
    text-align: right;
 }

我认为在 4.2 版本中最好使用 @Mr_Green 解决方案，但在 3.4 中，这个工作区对我有用 :)