In this example we’ll use some CSS magic and DOM manipulation to achieve the following layout. You might think this is easy to do with native layouts in ExtJS4, but I’ve found otherwise.
In this example we’ll use some CSS magic to put a button in the upper right corner of the fieldset. The button will be a child of our fieldset, so that when you collapse/expand the fieldset, the button behaves appropriately.
Basic Textfield Input Layout
In this example we put together the following layout that correctly grows vertically, as fields/errors are added:
In this example you will get a gold nugget. ExtJS4 shipped without support for fieldset icons. This is most unfortunate, considering ExtJS 3 had them.
You will need the following “fix”:
In the following ExtJS 4 example we will use native ExtJS controls and some DOM manipulation to achieve the following form. It is perfect for setting up sequential search filters, where for instance “AD Locked Out” value can have 3 possible values: true/false/do not query (if not present on form)
This tutorial series, each with with full source & demo on jsfiddle.net, will walk you through the following:
