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

Posted

技术标签:

【中文标题】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 您可以将标题配置提取到一个函数中并为每个数字列调用该函数。

以上是关于Cx 框架:如何在 NumberField 上设置对齐:右和小数精度的主要内容,如果未能解决你的问题,请参考以下文章

如何强制 ExtJS NumberField 中的小数显示达到一定的精度?

NumberField 或如何使 TextField 输入 Double、Float 或其他带点的数字

如何在 Windows 10 上使用 Cx_Freeze 制作 exe,包括 PyQt5 和 OpenCV

在 MongoDB 中插入 MAX(numberField) + 1

如何在 OSX 上使用 cx_Freeze 隐藏控制台

在 Sencha Touch 中设置 numberfield 的值而不触发“change”事件