How to layout properly items in the form in ExtReact?

Question

My current layout of the form looks like this:

And I want it to look like this:

How do I accomplish this?

I tried to use layouts which are offered on ExtReact Kitchen sink (https://examples.sencha.com/ExtReact/6.5.0/kitchensink/#/components/layouts), but with little success. This is my most important part of the code, which forms the rendering of the form:

<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>

score 0 · Answer 1 · answered Apr 19 '18 at 07:48

Just wrap checkboxies to div with width: 100%. You can do it by creating special component row or add div css class or simply do it like this:

<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>

But you have wrapped FieldSets for Radio buttons, and not for checkboxes... — Милош Рајковић, Apr 19 '18 at 07:53
Yes. If you need to do it more clear you can create component for it or you can looking for in component library you use — Kasabucki Alexandr, Apr 19 '18 at 07:53
could you try to wrap it to `Content` from your component library? — Kasabucki Alexandr, Apr 19 '18 at 08:07

How to layout properly items in the form in ExtReact?

1 Answers1