Understand Ext JS 5 widgets, extjs

Understand Ext JS 5 widgets, extjs

Original article: Understanding Widgets in Ext JS 5

In Ext JS 5, a new "widgetcolumn" is introduced to support component placement in cells in the grid. In addition, Ext JS 5 introduced a new lightweight component called "widget. Ext JS 5 contains several Widgets. This article will show you how to easily build your own widgets.

To illustrate the key concepts, create a simple widget named "ratings" in the text, as shown in:

Getting started

Unlike common components derived from Ext. Component, Widgets are derived from the new base class Ext. Widget. In addition, the derived classes of Ext. Widget are almost completely defined by the Configuration System (as mentioned later ). Ext. Widget also defines how DOM elements are generated and connected to DOM events.

Rendering

For a widget, the first thing to consider is how to define its DOM tree. The typical method is as follows:

Ext.define('Ext.ux.rating.Picker', {    extend: 'Ext.Widget',     //...     element: {        cls: 'ux-rating-picker',        reference: 'element',         children: [{            reference: 'innerEl',            cls: 'ux-rating-picker-inner',             listeners: {                click: 'onClick',                mousemove: 'onMouseMove',                mouseenter: 'onMouseEnter',                mouseleave: 'onMouseLeave'            },             children: [{                reference: 'valueEl',                cls: 'ux-rating-picker-value'            },{                reference: 'trackerEl',                cls: 'ux-rating-picker-tracker'            }]        }]    },     //...});

The object element creates dom elements based on the Ext. DOM. Helper specification. The main new functions are the reference and listeners attributes. These names are common in view controllers, and they do the same thing on widgets. In Ext. Widget, the reference attribute of all elements is cached in the Widget instance with the name as the attribute value (for example, element, innerEl, and so on ).

Event

In the preceding element, the listeners object is also defined in the innerEl object. These listeners are appended to the elements generated from the standard block. The method will be searched in the widget Class Based on the name, for example:

Ext.define('Ext.ux.rating.Picker', {    extend: 'Ext.Widget',     //...     onClick: function (event) {        var value = this.valueFromEvent(event);        this.setValue(value);    },     onMouseEnter: function () {        this.element.addCls(this.overCls);    },     onMouseLeave: function () {        this.element.removeCls(this.overCls);    },     onMouseMove: function (event) {        var value = this.valueFromEvent(event);        this.setTrackingValue(value);    }, 

Although this seems a bit similar to writing traditional component classes, it is obvious that the initialization code is missing and the code is cleaned up. The Ext. Widget constructor processes the creation of elements, tracks their references, and sets listeners. In addition to these actions (and corresponding destruction methods), Ext. Widget has no additional lifecycle or overhead.

As an alternative, a derived class can define its behavior by configuring the config attribute provided by the system. For those who do not understand the configuration system, the following will be a brief introduction.

Configuration System 101

One of the core concepts of Ext JS is the concept of "config. They were part of Ext JS from the very beginning, not just in Ext JS 5 (or Sencha Touch 2.x). The framework has normalized these attributes. Common configurations are declared as follows:

Ext.define('Ext.ux.rating.Picker', {    //...    config: {        family: 'monospace'    }    //...});

The preceding statement is equivalent to the following handwritten code:

Ext.define('Ext.ux.rating.Picker', {    //...     getFamily: function () {        return this._family;    },     setFamily: function (newValue) {        var oldValue = this._family;         if (this.applyTitle) {            newValue = this.applyFamily(newValue, oldValue); // #1            if (newValue === undefined) {                return this;            }        }         if (newValue !== oldValue) {            this._family = newValue;             if (this.updateFamily) {                this.updateFamily(newValue, oldValue); // #2            }        }         return this;    },     //...});

This automatic processing has the following significant advantages:

• Clear: fewer code and easier class reading
• Consistency: All configurations share the same behavior.
• Flexibility: configuration attributes can be changed at any time when they are implemented correctly, rather than only at creation (Common limitations of many old configuration attributes in Ext JS)
  

Developers can provide two key and optional methods for any attribute, such as family, applyFamily and updateFamily (where #1 and #2 in the code above ). These methods are almost always written rather than get or set methods.

Application Method (applier)

The application method running developer converts the received value to the actual stored value. For many application methods, this may mean creating some class instances based on the received configuration object, or it may be that the application method standardizes the internal representation in one place to avoid checking it in all the places where this attribute is used.

Update method (updater)

When the value of the Configuration Attribute changes, the update method is called. The update method is used to convert the old value to a new value.

InitConfig -- put it on

To add a class to the Audit Configuration System, you must call the initConfig method at a certain point. In Ext. Widget, It will be executed in the constructor. Method initConfig receives the config object and processes each of its attributes so that these declarations in the class can call the set, apply, and update methods as appropriate.

This method also provides a "just in time" setting mechanism to solve the order problem between configuration attributes. For example, if the update method of one Configuration Attribute requires the value of another Configuration Attribute, it must call the get method of the other configuration attribute. At the underlying layer, initConfig correctly calls the set/apply/update method according to the returned results before the requested properties.

Use cachedConfig for Optimization

For widgets, many configurations are required to maintain the DOM. Since it is unlikely that any given widget instance will overwrite all default configuration values, it would be ideal to cache the default values to be processed. You can modify these configurations as follows:

Ext.define('Ext.panel.Panel', {    //...    cachedConfig: {        family: 'monospace'    }    //...});

In most cases, these configurations are the same as common ones. However, when caching these configurations, the configuration system will execute some additional processing when creating the first instance of the class.

First instantiation

Before the configuration object of the first instance is processed, the configuration system only initializes from the default value of the class. The Department calls various apply and update methods, which in turn updates the initial generation of DOM elements according to the element specification.

Consider the family configuration, which includes the following update Methods:

updateFamily: function (family) {    this.element.setStyle('fontFamily', "'" + family + "'");},

All update Methods help you set the default DOM status for the widget. Once the configuration is set to their default value, the afterCachedConfig method is called. This method takes effect only when it is instantiated for the first time. Ext. Widget deeply clones the DOM tree (using cloneNode (true) dom api ).

Second Instance (and later)

When you create another instance of the same Widget class, Ext. Widget uses the cached DOM tree to clone and deeply clone it to create a performance Widget DOM tree. This avoids overhead of re-processing element specifications and updating methods that run default values. If the configuration update method is correctly written, the process is transparent to a large extent.

Of course, Ext. Widget has some work to do after copying the DOM tree, such as Retrieving Element references, encapsulating listeners, and setting any non-default configuration attributes to the instance. However, the overhead is directly related to the number of configuration values assigned to the instance, rather than the configuration attributes of the class.

Reuse and loop

The following describes how to create and initialize a single widget. There are several important concepts related to using widgets in the widgetcolumn.

Since the instance creation restrictions have always been the focus, buffer rendering is the key. Using this method, the mesh renders smaller parts than the record, and needs to be used repeatedly after the row is removed from the scroll area and before the new line is rendered.

When these transformations occur, widgetcolumn moves the widgets in the DOM to a new line, reads field data from the corresponding record through dataIndex, and CALLS setConfig of the widget to set its defaultBind attribute, this will call the apply and update Methods. Therefore, as long as the encoding is correct, the widget can now be reconfigured to display new field values.

In the current sample widget, because it only represents an editable value, you need to check in the updateValue method to see if the widget is already used in the grid cell:

column = me.getWidgetColumn && me.getWidgetColumn();record = column && me.getWidgetRecord && me.getWidgetRecord();if (record && column.dataIndex) {    record.set(column.dataIndex, value);}

Methods getWidgetColumn and getWidgetRecord are placed on the widget through widgetcolumn, So it knows its context in the grid ).

Summary

Although most of the widgets are discussed about the mesh, widgets can also be used anywhere in a traditional widget. It has become a fact that scoring widgets are introduced into Ext JS 5 as mini widgets.

The main panel of the example application shows four instances in its items array.

If you are familiar with the above, it is estimated that you have understood the Sencha Touch mode. Although these are extensions of Ext JS 5, Ext. Widget is essentially the last version of Ext. AbstractComponent in Sencha Touch.

So you will use widgets instead of components? In many ways, writing widgets is easier than writing components. This is especially true if only CSS is used to handle layout requirements. In addition, as we continue to integrate Sencha mobile and desktop frameworks, there will be a cross-border possibility of widgets in the future.

The complete code and example of the new widget can be found here. Enjoy it and let us know what you think.

Author: Don griin
Don Griffin is a member of the Ext JS core team. he was an Ext JS user for 2 years before joining Sencha and has over 20 years of software engineering experience on a broad range of platforms. his experience designing web application front-ends and back-ends, native GUI applications, network protocols and device drivers. don's passion is to build world class products that people love to use.

How to Understand extjs Widgets

After downloading EXT, there will be APIs in the installation package, which are very detailed. Alternatively, you can search for EXTJS APIs on the Internet. There are many translated APIs.

An EXT document is required for translation.

Sent. Please check it. I hope it can meet your needs and help you. Please give me more rewards. If you are in urgent need, please select more rewards, in this way, more friends will help you in time, and it will take a lot of time for me to find it.