Ext JS Modern – Making the parent Container of a Container Field horizontally scrollable

We all are accustomed to using Ext JS’s Field Container / Container Field when it comes to designing forms with Ext JS Modern. A typical complex form would usually involve a Form Panel with a VBox layout. Multiple form fields in a single row would typically be accommodated by using a Field Container.

However what if your Field Container has so many fields that your form needs horizontal scrolling (as in screenshot below)?

Even if you set scrollable as true on your form, all you will get is vertical scrolling. The form won’t detect it needs horizontal scrolling as well; as each Field Container has its own layout (typically a HBox), meaning the Field Container itself fits in the form horizontally. And its child items which although need to be scrolled horizontally to be fully visible cannot indicate to parent form’s layout of the same (as Field Container’s child items are bound by Field Container’s HBox layout).

Now we do not want a horizontal scroll bar on each Field Container individually (which as you can imagine would make the Form look horrible). So what do we do here?

Well the trick is in allowing the Field Container to not be clipped by parent Form Panel’s layout. And forcing the Field Container to achieve its full-width based on sum of widths of its child items.
The following CSS achieves the same:

.field-container-scrollable {
    overflow: visible;
}

.field-container-scrollable .x-body-wrap-el {
    overflow: visible;
}

.field-container-scrollable .x-body-wrap-el .x-body-el {
    overflow: visible;
}

Basically for the field container, we enforce the Container and its body el to assume full width based on the width of its child components / fields. Which forces the parent Form Panel to show horizontal scrollbar as in the screenshot above.

Now for this entire scheme of things to work, you need to make sure you have the following config options set:

1. The Form Panel needs to have its scrollable config option set to true.
   
2. Each Field Container inside the form whose child items can exceed the form’s width needs to have field-container-scrollable class applied to it.
   The easiest way to accomplish the same is to apply it as userCls on the Container Field / Field Container.
   
   userCls: field-container-scrollable

And that’s it. You have a Ext JS Modern Form Panel which can scroll its components horizontally as well as vertically based on scrolling needs.

Feel free to ping me below if you have issues using this solution or this doesn’t work for your version of Ext JS Modern toolkit.