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文档。

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

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

enter image description here

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

enter image description here

在了解了cofig“ align ”之后，您可能想要测试它。为此，文档提供了内联代码编辑器，如下图所示。
代码编辑器有两个选项卡，“代码编辑器”和“实时预览”。这些话说的都是。
只需在“代码编辑器”标签中添加更改，然后在“实时预览”标签中查看结果。

enter image description here

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

enter image description here

<强>更新

CSS：

.columnAlign{
     text-align: right;
}

ExtJS的

tdCls: "columnAlign",

Answer 2

回答Mr_Green，您可以使用右侧或左侧对齐文本的对准即可。要使标题保持居中对齐，请使用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">

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中这个workround可以为我工作：）

Extjs仅将单元格文本对齐

3 个答案:

CSS：

ExtJS的