Cx 框架：如何在 NumberField 上设置对齐：右和小数精度

Posted 2023-04-14

【中文标题】Cx 框架：如何在 NumberField 上设置对齐：右和小数精度

【英文标题】：Cx framework: How to set align:right and decimal precision on NumberField

【发布时间】：2017-04-12 07:59:10

【问题描述】：

我正在做一个项目，其中 IU 在 Cx 中完成，新的基于 React 的前端框架。 https://cxjs.io/ 我在每列顶部都有一个带有过滤器字段的网格。 例如这是数字列和字段：

    field: 'score', sortable: true,
    header: 
        style: 'width: 150px',
        items: <cx>
            <div>
                Score
                <br />
                <NumberField style="width:100%;margin-top:5px" value:bind="$page.filter.score"
                    reactOn="enter blur"/>
            </div>
        </cx>
    ,
,

但是价值在左边，我需要它在右边。 我希望网格和过滤器字段值都在右侧，但将列名保留在左侧。就像它通常在 Excel 中一样。 另外如何设置自定义小数位数，例如2？

【参考方案1】：

NumberField 小部件允许通过inputStyle 在输入元素上设置其他样式。使用format 完成格式化。网格列标题可以使用 style 设置自己的样式。

考虑到所有这些，它应该是这样的：

    field: "score",
    sortable: true,
    header: 
      style: "width: 150px; text-align: left",
      items: (
        <cx>
          <div>
            Score
            <br />
            <NumberField
              value:bind="$page.filter.score"
              format="n;2"
              style="width:100%;margin-top:5px"
              inputStyle="text-align: right"
              reactOn="enter blur"
            />
          </div>
        </cx>
      )
    
  

【讨论】：

Marko thx 快速回复。还有一件事，这些组件（带有标题和 NumberField 的字段）如何在此配置设置为默认值的地方被覆盖，这样我们就不必为所有 Number 列/字段重复它。

@BorisDj 您可以将标题配置提取到一个函数中并为每个数字列调用该函数。