Как правильно расположить элементы в форме в ExtReact?

Question

Мой текущий макет формы выглядит так:

И я хочу, чтобы это выглядело так:

Как мне это сделать?

Я пытался использовать макеты, которые предлагаются в кухонной раковине ExtReact ( https://examples.sencha.com/ExtReact/6.5.0/kitchensink/), но без особого успеха. Это моя самая важная часть кода, которая формирует рендеринг формы:

<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%, Вы можете сделать это, создав специальный компонент 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>