javascript - 如何在 ExtReact 中正确布局表单中的元素？

Question

我当前的表单布局如下所示:

我希望它看起来像这样:

我该如何实现？

我尝试使用 ExtReact Kitchen sink ( https://examples.sencha.com/ExtReact/6.5.0/kitchensink/#/components/layouts ) 上提供的布局，但收效甚微。这是我最重要的代码部分，它构成了表单的渲染:

<FormPanel scrollable={false}>
            <FieldSet title="Status:">
           <Label text="Status" />
           <RadioField  {...radioProps} boxLabel="All" value="Unchecked" />
           <RadioField  {...radioProps} boxLabel="Active" value="Unchecked" />
           <RadioField  {...radioProps} boxLabel="Closed" value="Unchecked" />
        </FieldSet>
        <FieldSet title="Linked/Unlinked:">
           <Label text="Status" />
           <RadioField  {...radioProps} boxLabel="All" value="Unchecked" />
           <RadioField  {...radioProps} boxLabel="Active" value="Unchecked" />
           <RadioField  {...radioProps} boxLabel="Closed" value="Unchecked" />
        </FieldSet>
        <FieldSet>
          <TextField labelAlign="top" label="Root:" border={true} />
          <ComboBoxField
            border={true}
            label="Account type"
            displayField="name"
            valueField="code"
            queryMode="local"
            labelAlign="top"
            typeAhead
          />
          <TextField labelAlign="top" label="Short name:" border={true} />
          <ComboBoxField
            border={true}
            label="Root category"
            displayField="name"
            valueField="code"
            queryMode="local"
            labelAlign="top"
            typeAhead
          />
          <TextField labelAlign="top" label="Full name:" border={true} />
          <ComboBoxField
            border={true}
            label="External agent"
            displayField="name"
            valueField="code"
            queryMode="local"
            labelAlign="top"
            typeAhead
          />
          <TextField labelAlign="top" label="Code word:" border={true} />
          <ComboBoxField
            border={true}
            label="Business unit"
            displayField="name"
            valueField="code"
            queryMode="local"
            labelAlign="top"
            typeAhead
          />
          <ComboBoxField
            border={true}
             label="Root type"
             displayField="name"
             valueField="code"
             queryMode="local"
             labelAlign="top"
             typeAhead
           />
           <ComboBoxField
             border={true}
             label="Relationshio manager"
             displayField="name"
             valueField="code"
             queryMode="local"
             labelAlign="top"
             typeAhead
           />
        </FieldSet>
        <FieldSet>
          <ReactButton ui='searchPanelStartOver' text="Start over" />
          <ReactButton ui='searchPanelSearch' text="Search" />
          <ReactButton ui='searchPanelCancel' text="Cancel" />
        </FieldSet>
</FormPanel>

Answer 1

只需使用 width: 100% 将复选框包裹到 div 中。您可以通过创建特殊组件 row 或添加 div css 类或简单地这样做来实现:

<FormPanel scrollable={false}>
      <div style="width: 100%">
            <FieldSet title="Status:">
             <Label text="Status" />
             <RadioField  {...radioProps} boxLabel="All" value="Unchecked" />
             <RadioField  {...radioProps} boxLabel="Active" value="Unchecked" />
             <RadioField  {...radioProps} boxLabel="Closed" value="Unchecked" />
          </FieldSet>
          <FieldSet title="Linked/Unlinked:">
             <Label text="Status" />
             <RadioField  {...radioProps} boxLabel="All" value="Unchecked" />
             <RadioField  {...radioProps} boxLabel="Active" value="Unchecked" />
             <RadioField  {...radioProps} boxLabel="Closed" value="Unchecked" />
          </FieldSet>
       </div>
        <FieldSet>
          <TextField labelAlign="top" label="Root:" border={true} />
          <ComboBoxField
            border={true}
            label="Account type"
            displayField="name"
            valueField="code"
            queryMode="local"
            labelAlign="top"
            typeAhead
          />
          <TextField labelAlign="top" label="Short name:" border={true} />
          <ComboBoxField
            border={true}
            label="Root category"
            displayField="name"
            valueField="code"
            queryMode="local"
            labelAlign="top"
            typeAhead
          />
          <TextField labelAlign="top" label="Full name:" border={true} />
          <ComboBoxField
            border={true}
            label="External agent"
            displayField="name"
            valueField="code"
            queryMode="local"
            labelAlign="top"
            typeAhead
          />
          <TextField labelAlign="top" label="Code word:" border={true} />
          <ComboBoxField
            border={true}
            label="Business unit"
            displayField="name"
            valueField="code"
            queryMode="local"
            labelAlign="top"
            typeAhead
          />
          <ComboBoxField
            border={true}
             label="Root type"
             displayField="name"
             valueField="code"
             queryMode="local"
             labelAlign="top"
             typeAhead
           />
           <ComboBoxField
             border={true}
             label="Relationshio manager"
             displayField="name"
             valueField="code"
             queryMode="local"
             labelAlign="top"
             typeAhead
           />
        </FieldSet>
        <FieldSet>
          <ReactButton ui='searchPanelStartOver' text="Start over" />
          <ReactButton ui='searchPanelSearch' text="Search" />
          <ReactButton ui='searchPanelCancel' text="Cancel" />
        </FieldSet>
</FormPanel>