24. Teach you Extjs5 (24) Custom design of module form [3]

The custom form is ready to run, change the configuration below, and put the fieldset in the form under tab. Modify the schema under Tf_formschemes under Data in Modulemodel.js to add a property.

Once you've set it up, you can see that the fieldset is placed in tab in the form, and the following shows the two tab interface.

Theoretically, if your form configuration information is set properly, you can get the form of any style you want. But in the actual application, we only need to complete the majority of the automatic generation is enough, the real program has a super-perverted complex form structure, you can build scripts. The above code and example just shows how to customize a form, to be able to really apply also have to do a lot of work, for beginners or the experience is not very rich programmer, this as an extension of the view of the example to see the line.

The above is an editing window, the data edited later to be saved back to the model, this save does not use the MVVM feature, I write directly in the Baseform.js button control.

 This . Buttons.push ({    ' saved ',    '    save ', 0xf0c7,    function (Button) {        button.up(' form '). GetForm (). UpdateRecord ();}    }, {    ' close ',     ' Close ',    0xf148,    function  (button) {        button.up ( ' window '). Hide ();    });

After a form has called the data from the model using the Loadrecord (model) function, you can use Getrecord () to return to the model, which can be updated directly with the value in the form using UpdateRecord () after the data has been modified.

This statement was executed in the saved handler: button.up (' form '). GetForm (). UpdateRecord ();

For beginners, button.up (' form '), which starts recursively from the first parent container of the button, until the form is found, is a very good way to find another control based on the control, creating a way for everyone to find the control, Do not use the GETCMP (ID) method of this direct lookup. There is also a down method corresponding to up, which is a function that looks up the child controls of this control. After adding this method to the example above, you can save the data.

24. Teach you Extjs5 (24) Custom design of module form [3]