ExtJS Form Builder

Background

As the ExtJS matures, it is constantly being accepted and used by developers. ExtJS is a complete UI framework with controls that are already well adapted to the needs of everyday development, and it is still based on HTML and styling, and is very easy to extend when unsatisfied with the special needs of requirements. Therefore, my consistent attitude is that to use ExtJS must be used thoroughly, the UI part should be fully used ExtJS to achieve, completely discard the traditional asp.net foreground mode. Of course, there are also some implementations that encapsulate ExtJS into ASP.net Server control, such as Coolite, Extaspnet.

The ExtJS UI framework completely hosts the form's layout, making it easy and convenient to work with form layouts. Developers can generate and control style-uniform forms with JSON code without caring for HTML and styles, and can significantly reduce the developer's reliance on UI designers. But creating a form with JSON is another big challenge: Designing a form typically involves writing hundreds of lines, or even thousands of of JavaScript code, which is a considerable burden in the absence of a fully designed JavaScript IDE, as long as The lack of a bean number may cost you a lot of time to debug, which is a very serious problem. Because the UI is generated through JSON code, this makes the visual design of Web forms a possibility, simply by having the designer generate JSON code that describes the form. But there is still not a mature, usable visual form Designer. On the other hand, because in the management system, all forms basically all adopt the same layout, can be modeled. So in a structured way to describe the form, through the form generation engine to parse the structured form description data, generate JSON code, the corresponding processing at the client can greatly reduce the development pressure, while improving the development efficiency.

Basic principle

The idea of the Extjs form Builder is created in such a context, and it is feasible to validate the actual project and obtain a good result. The basic principles of ExtJS form builder are: Define the form definition metadata (which can be XML or in a database), parse the form JSON scripts required for these metadata generation through a parser (divided into two, grid and detail forms), and then by the MVC controller, Outputs a JSON object, receives the form at the client, and makes a data query operation. The data source and data submission target for the generated form's query are described in the table cell data definition. Standard four kinds of operations:

Queryurl, the destination address of the list query.

Detailsurl, view detailed form data.

Submiturl, submit add or update data.

DeleteUrl, deletes the address of the data.

After defining these four kinds of standard, basically can satisfy the ordinary increase, delete, change, check operation. Each URL address corresponds to an MVC action.

Implementing metadata formats

The metadata includes form definitions and field definitions, and the corresponding interfaces are: Ischema and icolumn. Ischema contains Icolumn, and icolumn can be grouped (the corresponding ExtJS control is fieldset), since two interfaces inherit from the Icolumncontainer interface, corresponding class diagrams:

The source of the metadata, either an XML file or a definition in the database. Here, our default implementation is to save the metadata in an XML file.