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
            }

添加对齐属性对我没有用，因为它也会对齐标题文本。

- kuldarim

Answer 1

numbercolumn有一个名为align的配置，直接使用即可。

当你遇到困难时，可以查阅Sencha文档，它专门为初学者设计。

我假设你是初学者，并解释如何使用文档...以便您更清楚地理解：

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

---

---

• 在您的情况下，我们假设您已搜索“numbercolumn”，然后您可以看到以下窗口，显示所有的配置、属性、方法等。只需将鼠标悬停在上面，了解与“numbercolumn”相关的内容。
• 在您的情况下，您正在寻找一个将文本对齐到右侧的配置。那么您大多会寻找txtAlign、align、textAlign等关键词。
• 因此，您将找到一个名为“align”的配置。只需单击它以了解更多信息。

---

---

• 了解有关“align”配置的信息后，您可能想要测试它。为此，文档提供了内联代码编辑器，如下图所示。
• 代码编辑器有两个标签，“code editor”和“live preview”。这些单词说明了一切。
• 只需在“code editor”选项卡中添加更改，然后在“live preview”选项卡中查看结果即可。

---

• 例如，在以下“code editor”中添加align: "right"代码。

---

---

更新

CSS:

.columnAlign{
     text-align: right;
}

extjs

tdCls: "columnAlign",

- Mr_Green

---

我知道如何使用文档，但我认为你不理解我的问题所在。我并不傻，不会不知道如何将对齐属性添加到我的列配置中，而且我也不是ExtJs的初学者，但这并没有改变什么。 - kuldarim

正如您在发布的链接中所读到的，设置标题和呈现列的对齐方式。可能的值为：“left”、“center”和“right”。正如我之前提到的，标题对我来说不合适。 - kuldarim

@Riku 没关系，我只是为了其他用户添加了一些内容，没有冒犯的意思。我会查看你的解决方案，请稍等。 - Mr_Green

@Riku 使用 tdCls 替代 align，并传递一个包含 text-align: right 的类名。 - Mr_Green

是的，它可以在4.2中工作，但我正在使用3.4，并且没有这样的属性tdCls；/ - kuldarim

Answer 2

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

.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">

- Dev

---

将css 'text-align: left'添加到我的列配置中，这不是与此相同吗？ - kuldarim

如何将CSS附加到我的组件？ - kuldarim

提示：在Extjs 4.2中，必须使用cls而不是css。在Extjs 4.2中没有名为css的配置项。我曾因此而苦苦挣扎，因为我尝试了上述代码片段。 - F4k3d

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版本中这个解决方法对我有效 :)

- kuldarim