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

只需将复选框包装到 div 中 width: 100%。您可以通过创建特殊组件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>