Cx 框架：如何在 NumberField 上设置 align:right 和小数精度

Question

我正在从事一个项目，其中 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？

Answer 1

NumberField 小部件允许通过 inputStyle 在输入元素上设置其他样式。使用 format 完成格式化。网格列 headers 可以仅使用 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>
      )
    }
  }

Cx 框架：如何在 NumberField 上设置 align:right 和小数精度

Cx framework: How to set align:right and decimal precision on NumberField

javascript

frontend

number-formatting

reactjs

cxjs