Cx Framework: Как установить выравнивание: правая и десятичная точность на NumberField

Я работаю над проектом, где IU делается в Cx, новый React основанный Framework для FrontEnd. 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>
      )
    }
  }
Другие вопросы по тегам