确定输入字段的宽度

Question

我有一个包含以下表单的对话框：

如何将输入平常日设置为比Ver更宽。输入？比例应为3：1。

简单表单的代码段：

<f:SimpleForm id="form-add-item"
                    maxContainerCols="2"
                    editable="true"
                    class="editableForm">
        <f:content>
          <l:VerticalLayout>
            <Input value="{vmNewItem>/sPlant}" placeholder="{i18n>insColPlant}"/>
            <Input value="{vmNewItem>/sWorkCenter}" placeholder="{i18n>insColWorkCenter}"/>
            <l:HorizontalLayout>
              <Input value="{vmNewItem>/sUsualDay}" placeholder="{i18n>insColUsualDay}">
                <layoutData>
                  <l:GridData span="L2 M2 S4" linebreak="true"/>
                </layoutData>
              </Input>
              <Input value="{vmNewItem>/sUsualDayVer}" placeholder="{i18n>insColUsualDayVer}">
              </Input>
            </l:HorizontalLayout>
            <l:HorizontalLayout>
              <Input value="{vmNewItem>/sSpecialDay}" placeholder="{i18n>insColSpecialDay}"/>
              <Input value="{vmNewItem>/sSpecialDayVer}" placeholder="{i18n>insColSpecialDayVer}"/>
            </l:HorizontalLayout>
          </l:VerticalLayout>

        </f:content>
      </f:SimpleForm>

Answer 1

有几种方法可以实现。如果你使用SimpleForm控件，一种可能的方法是使用ResponsiveGridLayout并指定layoutData如下...

    <f:SimpleForm id="form-add-item"
                maxContainerCols="2"
                editable="true"
                class="editableForm"
                layout="ResponsiveGridLayout">
        <f:content>
            <Input value="{vmNewItem>/sPlant}" placeholder="{i18n>insColPlant}">
                <layoutData>
                  <l:GridData span="L12 M12 S12" />
                </layoutData>
            </Input>
            <Input value="{vmNewItem>/sWorkCenter}" placeholder="{i18n>insColWorkCenter}">
                <layoutData>
                  <l:GridData span="L12 M12 S12" />
                </layoutData>
            </Input>
            <Input value="{vmNewItem>/sUsualDay}" placeholder="{i18n>insColUsualDay}">
                <layoutData>
                  <l:GridData span="L9 M9 S9"  />
                </layoutData>
            </Input>
            <Input value="{vmNewItem>/sUsualDayVer}" placeholder="{i18n>insColUsualDayVer}">
                <layoutData>
                  <l:GridData span="L3 M3 S3" />
                </layoutData>
            </Input>
            <Input value="{vmNewItem>/sSpecialDay}" placeholder="{i18n>insColSpecialDay}">
                <layoutData>
                  <l:GridData span="L9 M9 S9"  />
                </layoutData>
            </Input>
            <Input value="{vmNewItem>/sSpecialDayVer}" placeholder="{i18n>insColSpecialDayVer}">
                <layoutData>
                  <l:GridData span="L3 M3 S3" />
                </layoutData>
            </Input>
        </f:content>
    </f:SimpleForm>