EXT 4 Overview (7) Panel & Miscellaneous

 

Panel

Supports docking)

One of the changes to a panel is the use of a panel-specific
Componentlayout) to manage the element items exposed within the boundary. The Panel Body element is exposed to any blank space. Any component can be touched by setting the dockeditems configuration item attribute of the target panel, and the dock attribute of the other panel must be set with it. As a result, the difficult horizontal toolbar in ext3 has greatly improved its flexibility and is easy to implement in ext4.

Header header Improvement

Currently, the header is the first type of citizen of the container subclass to obtain the management and layout features of child components. You can set headerposition
Either Of 'top', 'right', 'bottom ', or 'left' determines the position (new docking support) that the reader depends on ).

Tool buttons (buttons such as close and minimize) are available in ext3, but now they belong to the component subclass and are more flexible.

Resizer

Ext has a size-Adjusted Control for a long time, but only serves DOM elements. Now ext
4. Any component can also adjust the size through Ext. resizer. resizer. This is useful for floating components, or when rendering components outside the ext container system are not used.

If you set the widget resizable: True, multiple adjustment handles are allocated to the widget's border. By default, a proxy element is used to adjust the size.
After the component is up, the size of the component changes. For specific adjustment behaviors, you can modify the configuration item object resizable, which is a parameter object of the resizer class.

Componentdragger

Ext has always supported multiple drag and drop methods, but it is still at the DOM Element Level. EXT
4. After improvement, the new Ext. util. componentdragger is upgraded to the component level, making it easier to drag components. Componentdragger is useful for floating components and has some UI controls for non-container models.

You only need to set the configuration item draggable: true of the component, and the component can be dragged with the mouse. Windows itself can be dragged. During dragging, The dragger is actually a blank "ghost". After the mouse is released, the Panel or form moves to the destination location, and the "ghost" disappears. You can modify the dragger behavior by specifying the draggable configuration item. This configuration object is also applicable to the configuration object of componentdragger.

Split bar Splitter

Both the hbox and vbox boxes can contain the Ext. resizer. Splitter component to adjust the size between boxes. The minimum and maximum sizes are supported. By default, if you adjust the size of one of the Flex items in the box layout, the original flex value will be changed to the exact pixel value, and the flex value will be deleted. If you do not want this to happen, you can configure maintainflex: True to keep the flex value, even after the resize operation. However, this only applies to the division of two columnsWhere
One piece.

 

Tabpanel

Like many other ext components, the main component of a tabpanel has been broken down and become the first citizen of the ext4 component. Tab itself is only a few DOM elements in ext3, but now ext4 re-recognizes tab as a "button". The container that holds these tabs is a container. Various aspects show that tabpanel 4. x is more flexible than ext3.

The above practice is to separate the tabs from the Child bread containing the content to form different widgets. Because of this separation, we can now display the title titile, tool buttons, and other features that cannot be imagined in the old ext3 In the tab panel.

Toolbar

The toolbar is now the first citizen of the container. It is easier to add new components or customize the toolbar layout than ext3.

Theming)

Thanks to your kindness, the topic of ext has always been regarded as a brilliant place. It looks good and can be modified but not easy. Although ext
3. The separation structure and visual style sheets improve theme creation tasks, but they are not enough. There are still redundant and complicated browser private features and a key, this is a problem caused by insufficient CSS language.

Reference resources

EXT 4 theming (video)

EXT 4
Theming (slides)

Compass and sass

The topic style of ext is implemented using a new tool, and compass is converted internally.
And sass
As the main CSS output tool. Sass is the Super Standard of CSS and has added many new advanced features.

• Embedded Selector
• Variable
• Polymorphism
• Selector inheritance
• Compilation and Compression
• You can export the styles required by any component, and do not export unnecessary styles.

Different Markup

EXT now supports the markup of components in a specific version or browser, which is a big step ahead of ext3.

Document

• Support more new elements of the class (such as requires and mixins)
• Support for legacy Elements
• Record browsing history
• Connotation examples, videos, etc.
• Topic
• Support for multiple frameworks and versions
• Local Search