21. Teach you Extjs5 (21) Custom design of module form

The previous sections have completed the customization of the module grid, and the module form customization process is similar to the grid process, but more complex. Start by designing the overall goals you want to accomplish.

1 can have more than one form scheme, corresponding to display, add, modify, review, approval and other functions;

2. For each of the above functions can choose a different form scheme, such as modification can have several scenarios, each operator can choose their interest in the form scheme for data modification.

3. You can define several field groupings (FieldSet or Fieldcontainer) in each form scheme.

4. You can place several fields in each field group.

5. Each form scheme can be defined as tab or accordion display.

6. A grid that can place sub-modules in a form, that is, Master-detail mode.

Specific content can see my previous blog: http://blog.csdn.net/jfok/article/details/24472139, below I post a few figures show the custom generated form interface, good to have a visual understanding.

1, the most basic form interface, there is only one fieldset, there are a number of fields, there are some operation buttons.

2. A form consisting of two fieldset, some of which can be folded.

3. Add a grid of sub-modules in the form.

4. Add the tab style to the form.

5. Form tables in some special formats.

6. A more complex example: this example adds a single record of multiple sub-modules, which can be manipulated together.

The above lists some form types that can be completed in the original version, and the above examples are generated entirely from the ExtJS interpretation performed by the configuration information. It is possible for managers to add and modify any form item directly in the system, thus completing the fully customizable function of the module form.

In the display of FormField, in addition to the creation of a character field, you can also complete the date, value, combo and other complex types of fields, as long as the function can be thought out, it is possible to write the configuration, and then explain the show. In the following implementation process, because there is no front and back interaction, I will only do a relatively simple example to show how to customize the implementation of the form.

21. Teach you Extjs5 (21) Custom design of module form