ExtJS-based Web Form Designer Section One

The background and final approximate style of the form designer are described in the previous section, and this section focuses on the requirements and functional design of the form designer.

Identify a few common concepts before you talk about requirements:

The Main Table or card table -a control block with a range of multiple rows and columns, as shown in.

Schedule --the control block of a commonly used table type, and the header information establishes the data type of the column, as shown in.

card-Type table : Refers to a form template that includes only one main table;

Master Table : Refers to a form template contains a main table, a schedule;

Multi-child table : Refers to a form template contains a main table, a number of schedules;

nested Multi-sub-tables : Refers to a form template nested in more than one master table or multiple child tables;

　　

Overall requirements for the form designer:

1. Can support complex document style (main table, master table, multi-child table, nested multi-child table);
2. The ability to support WYSIWYG graphical form design methods. User-designed form template is what style, then the build should be what the style of loading it;
3. Drag-and-drop to drag a variety of form template control, make the user experience better and more convenient;
4. The induction and design of the form common control;
5. Various controls can easily adjust the order of display, Exchange position, exchange area, etc.
6. All the properties of the various controls can be easily set, modified. Includes: Control name, default value, range of values, data source, data linkage between controls, control hidden or not, and so on;
7. The number of control columns in the main table area supports dynamic adjustment;
8. The column header of the schedule table supports grouping column headers, as well as exchanging positions between columns;
9. The usual numbers, amounts, and other data in the schedule table are summarized in different ways (such as summing, averaging, maximum minimum, counting, etc.);
10. Open form template of some commonly used easy to change data interface, to facilitate the special processing of some special forms;
11. Delete control of form item, form area and form template;
12. The form control data source, takes the number formula the induction;

Preliminary summary of the above 12 design requirements, according to the requirements of the overall requirements of the form designer can meet our actual business needs.

In the next section I describe the design details process.

ExtJS-based Web Form Designer Section One