EXT 4 Overview (5) layout, component, and form

Layout

Reference resources

EXT 4 layouts (video)

EXT 4
Layouts (slides

Componentlayout

Componentlayout is a new layout method. Many complex components use this layout (corresponding to containerlayout and "containerlayout"-the new name of the traditional container layout) to calculate the size and size of the built-in elements in response to the resize call. The fieldlayout layout of the field component. The size, size, and positioning of the Labell control and the input element control come from the componentlayout logic.

Formlayout

EXT 4 has no such formlayout. For more information, see the form section of [# form-layout.

Borderlayout

Border layout is completely compatible with ext4 or ext3 ).

The header of the Panel can now be vertically arranged. That is to say, when you fold a vertical head, you can fold it in the East or the West, and it is no problem to rotate it 90 degrees.
4. New <
Href = "# Draw"> draw package </a> ). The header in ext3 is essentially an element, but ext4 has a mature Ext. Panel. header instance, and there are several methods. You can use the new layout method getplacerholder to get the header object. Of course, as a subclass of iner, panel naturally has all the container methods. If the layout is closed for the first time, the header component object is not rendered.

Another subtle difference is that cmargins no longer supports configuration items. As in the expanded panel, the header container is now the same margin (margins ). This makes the layout appear more consistent regardless of the closed or expanded state of the component.

From the perspective of more flexible layout and layout, borderlayuout allows nested hbox and vbox layout to create the Border Management (the bordered
Arrangement ).

Component

A common component is changed to a "floating" component only when its floating: True is set.
Flow. After changing to floating, You can further configure the components. You can configure the components, such as whether to drag or adjust the height and width. It can even be added as a sub-item to another container, but it only floats on it and does not participate in layout operations.

All floating components have a z-index Z-index provided by zindexmanager. Zindexmanager is from the window of ext 3.
Group. In general, the singleton Ext. windowsmgr manager is responsible for managing floating components such as Windows. The show () method on the form object is called to render and display the document. In addition, zindexmanager is involved in calling the tofront () or Toback () Methods of the form.

The floating components involved in container rendering, although floating, must be in the container. When rendering, The zindexmanager reference is obtained first, and then the parent container that requires Z-index management is searched. Generally, the singleton Ext. windowmgr provides all information. However, if the floating component is a floatingContainer
, Such as window, this window will create a dedicated zindexmanager instance, and the floating components under the window will be managed relative to the Z-index of the window.

Now ext can be described as a new form. Using Z-index as creden to manage floating containers can be quickly controlled no matter how complicated the containers are, it also avoids conflicts between components. For example, the combo drop-down box in the form is always on that form without affecting other layers.

Form

Layout

In the ext 3 era, formpanel uses formlayout to locate field tags, input controls, error prompts, and other tasks. But an important message is Ext.
The formlayout in Step 4 is canceled and replaced by the new member fieldlayout (<
Href = "# component-layout"> A subclass of componentlayout </a> ). Standard Layout manages basic services in a unified manner, and fieldlayout serves field label controls. As long as the result is a standard layout, it can be changed to a layout with form features. In short, we hope to make a great leap in flexibility.

Although the standard layout can contain forms, a form panel formpanel is provided, and the container layout is anchor by default.

Fieldcontainer

To manage the form layout, ext introduces the new Ext. Form. fieldcontainer class. This is not only a standard Ext. Container class, but also the considerations of adding label controls and error messages to Ext. container. The label and error information configuration methods are the same API as Ext. Form. Field. Just as the real field input controls automatically stretch to occupy a blank space, the sub-components under the container will be adaptive. In this way, adding complex components to a form can also be grouped in a beautiful way, and the form field controls can be aligned.

Field as Mixin

It has long been difficult to add field-based capabilities to non-field components, such as layout, data verification, and value management. The simplest method is to directly inherit from Ext. Form. Field to obtain the corresponding capabilities. Although simple and feasible, it breaks down the inheritance chain of the original component. The reason is that ext or Javascript can only provide a "single inheritance scheme" and cannot directly implement multi-inheritance. Of course, this is the embarrassment of ext3. In ext4, all of this will become a thing of the past, by providing polymorphism <
Href = "# class-mixins"> mixins </a> support allows us to say goodbye to the old one, just copying fields to the class prototype
Prototype.

The field is designed as a polymorphism class and can be mixed into other main classes. The result is that any component can have the field
All the energy of the API. Of course, you can also modify the specific behavior of the field as needed, such as rewriting the getvalue method and setvalue method.

Validation

A common scenario is to immediately check the validity of user input data. As early as ext
3. Form Verification is enabled, provided that the monitorvalid option of formpanel is enabled. However, after the change option is enabled, the form is verified every second, so it looks very slow.

EXT 4 cannot tolerate this deficiency, so a new event stream has been re-designed as follows:

• The input box control listens to events from the browser at any time, that is, to detect any changes in the content. Once you input the content, that is, typing, cropping, copying, and dragging the text to the input box will change the content of the input box. We encapsulate these browser events as changeevent events to detect changes in the input box (The details are described below ).
• Once the value is changed, each field will immediately verify itself. When the validity of a field changes from invalid to valid, the validitychange event is triggered, and vice versa.
• When a field triggers the validitychange event, the validity detection within the form range is triggered. basicform triggers its own validitychange event.

The new event stream can immediately report user input to users because the performance of new events is much faster than that of polling in the past. Therefore, the event stream method is the default method (ext
3, but not, must be explicitly enabled ). Of course, you can also disable event streams.

However, in some special cases, the value of polling seems to be worth rethinking. Some browsers (such as opera and some older versions of Safari) are in the edit
When mode is used (when you right-click to cut or paste), the detection event cannot always be triggered. To solve this problem, you can enable the formpanel pollforchanges parameter to allow the field change detection through polling. The trigger is still like the above event stream. -- I have to say that the polling method has poor performance, but compared with ext
3. The round-robin intensity is not that serious, because each round-robin is only an observation of the value, without the participation of heavy data verification (verification of value parsing, conversion, and regular pattern matching ).

When the field changes, the field content is verified (if validateonchange is enabled ). Browser events that detect content changes are stored in the checkchangeevents parameter. You can access this parameter to obtain the event name. The checkchangeevents values may vary with the browser:

• For internetexlorper, checkchangeevents are change and propertychange.
• For other browsers, checkchangeevents are change, input, textinput, and keyup.

The events listed in the two points generally contain events that can detect user input changes. Almost all browsers are supported. However, there are still some situations where changes cannot be detected, as listed below:

• Safari 3.2 or older versions: Right-click to cut or paste and drag the text to textareas.
• Opera 10 and 11: drag the text to the input box and textareas, right-click to cut the content of the input box and textareas.
• Opera 9: In addition to opera 10 and 11, you can also right-click and paste the content of the input box and textareas.

Why does Oprea's QA keep so many bugs ...... :)) If the value changes only after polling, you can enable the formpanel configuration item pollforchages and the configuration item pollinterval, or set a timer to call startpolling () methods and stoppolling () methods can be detected.

EXT 3 supports the formbind attribute of buttons to control the enabled/disabled status of buttons out of the form Element range. EXT
4 is not limited to form verification, but extended to any component in formpanel.

Fielddefaults

Old ext
In formlayout 3, how to display all fields in the form is arranged, such as hidelabels and labelalign, which are the configuration item attributes of formpanel. Because ext form containers adopt standard layout and formlayout does not exist, to specify the layout attribute of common fields, it is very complicated to enter containers or fields at different layers. Therefore, formpanel provides a fielddefaults object. The specified value is used by all field objects, regardless of the number of layers of formpanel.

Basicform

EXT
The basicform of 3 is not widely used, but occasionally used within formpanel. If ext4 is used, basicform is created more flexibly and easily. The new basic does not need a container to allocate elements, nor does it need its container to manually notify basicform to add or delete fields. That is to say, it is completely decoupled from formpanel and has the ability to manage form fields in any way.