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