Extjs仅将单元格文本右对齐

g6ll5ycj  于 2022-11-05  发布在  其他
关注(0)|答案(3)|浏览(323)

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

{
            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属性不起作用,因为它也会对齐页眉文本

hl0ma9xz

hl0ma9xz1#

有一个numbercolumn的配置,称为align。只需使用它。
每当你被卡住,请参考secha docs,这是美丽的设计,只是为初学者。
我假设你是初学者,并向你解释如何使用docs..为你清楚地理解:

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

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

  • 在了解了cofig“align"之后,你可能想测试一下它。为了这个目的,文档提供了内联代码编辑器,如下图所示。
  • 代码编辑器有两个选项卡,“code editor”和“live preview"。这些字说明了一切。
  • 只需在“code editor”选项卡中添加更改,并在“live preview”选项卡中查看结果。

  • 例如,在下面的“code editor"中添加align: "right"代码。

已更新

CSS:

.columnAlign{
     text-align: right;
}

扩展名

tdCls: "columnAlign",
iaqfqrcu

iaqfqrcu2#

正如Mr_绿色所回答的,您可以使用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">
11dmarpk

11dmarpk3#

其实谢谢你们两个人的帖子,它帮了我很大的忙。我自己也找到了一个解决办法。
我需要将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_绿色解决方案,但在3.4版本中,这个变通方案对我很有效:)

相关问题