Learn extjs5 with me (22 -- custom design of the module Form), extjs522 --

Learn extjs5 with me (22 -- custom design of the module Form), extjs522 --
Learn extjs5 with me (22 -- custom design of the module Form)
The previous sections have completed the customization of the module Grid. The custom process of the module Form is similar to that of the Grid, but it is more complicated. First, design the overall goal to be completed. 1. There can be multiple Form schemes, corresponding to display, add, modify, review, approval, and other functions; 2. You can select different Form schemes for the above functions, for example, there are several solutions to modify the data. Each operator can select the Form solution they are interested in to modify the data. 3. Several field groups (FieldSet or FieldContainer) can be defined in each Form scheme ). 4. Several fields can be placed in each field group. 5. Each Form scheme can be defined as a Tab or Accordion display mode.
6. You can place the Grid of the lower-level module in Form, that is, the master-detail mode.
For details, refer to my previous blog: Ghost. 1. The most basic Form interface has only one FieldSet, which contains several fields and some operation buttons.

2. A Form composed of two fieldsets, some of which can be folded.


3. Add the submodule Grid to Form.

4. Add the Tab style to Form.
5. Some Form tables in special formats.

6. A complex example: multiple sub-modules with a single record can be added in this example for collaborative operations.




The above lists some Form types that can be completed in the original version. The above examples are generated based entirely on the configuration information explained and executed by extjs. The management personnel can directly add and modify any Form items in the system, thus completing the Fully customized function of the module Form. In the displayed FormField, in addition to generating the character Field, you can also complete complex types of fields such as date, value, and Combo. You can write the configuration as long as you think of the function, then explain and show it. In the following implementation process, since there is no interaction between the front and back ends, I will just give a simple example to demonstrate how to customize the Form implementation.