"Translation" Learn about the widgets of Ext JS 5

Original: Understanding Widgets in Ext JS 5

In ext JS 5, a new "Widgetcolumn" is introduced to support the placement of components in cells in the grid. At the same time, a new lightweight component called "Widgets" was introduced in Ext JS 5. In ext JS 5, there are a few widgets that will show you how to easily build your widgets in this article.

To illustrate the key concepts, a simple widget named "ratings" is created as shown in the article:

Entry

Unlike the commonly used components derived from ext.component, the widgets derive from the new base class Ext.widget. Moreover, Ext.widget's derived classes are almost entirely defined by the configuration system (which is discussed later). Ext.widget also defines how DOM elements are produced and connected to DOM events.

Rendering

For widgets, the first thing to consider is how to define its DOM tree, which is typically implemented as the following code that specifies the element property in the class:

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 '            }]        }]    },     //...});

object element is based on the Ext.dom.Helper specification to create DOM elements, and the main new feature is the reference and listeners properties. These names are commonplace on the view controller, and what they do on the widgets is similar. In Ext.widget, the reference property 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 above element, the listeners object is also defined in the Innerel object. These listeners are appended to the elements generated from the specification block. Method is found 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);    

While this may seem a bit like writing a traditional component class, it is more obvious that the initialization code and cleanup code are missing. The Ext.widget constructor handles the creation of elements, keeps track of their references, and sets up listening. In addition to these actions (and the corresponding destruction methods), Ext.widget has no additional life cycle or associated overhead.

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

Configuring the System 101

One of the core concepts of EXT JS is the concept of the configuration (config) attribute. They are part of Ext JS from the beginning, not only in Ext JS 5 (or Sencha Touch 2.x), the framework has already normalized the mechanisms of these properties. Common configurations are declared like this:

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

The above 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) {                R Eturn this;            }        }         if (newvalue!== oldValue) {            this._family = newvalue;             if (this.updatefamily) {                this.updatefamily (newvalue, oldValue);//#2            }        }         return this;    },     //...});

This automated process has the following notable advantages:

• Clarity: Less code, easier to read classes
• Consistency: All configurations have the same behavior
• Flexibility: When implemented correctly, configuration properties can change at any time, not only at creation time (common limitations of many old configuration attributes in Ext JS)
  

Developers can provide two key and optional methods for any property, such as family, applyfamily and Updatefamily (# # and # # in the code above). These methods are almost always more than overrides instead of get or set methods.

Application Method (Applier)

The application method runs the developer to convert the received value to the actual stored value. For many application methods, this may mean creating instances of classes based on the received configuration object, or perhaps applying methods to standardize the internal representation in one place to avoid checking it at all where the property is used.

Update method (Updater)

The Update method is called when the value of the configuration property has changed. The purpose of the Update method is to convert the old value to a new value.

initconfig--, take it.

Finally, to add a class to the boil configuration system, you must call the Initconfig method at some point. In Ext.widget, it executes in the constructor. The Initconfig method receives the Config object and processes each of its properties so that the declarations in the class are appropriate to invoke the set, apply, and update methods.

The method also provides a "timely (just in time)" setting mechanism to resolve the order problem between configuration properties, for example, if the Update method of one configuration property requires the value of another configuration property, it will invoke the Get method of another configuration property. At the bottom, Initconfig calls the Set/apply/update method correctly in order, based on the results returned before the requested property.

Using Cachedconfig for optimization

For widgets, there are times when many configurations are needed to maintain the DOM. Since any given widget instance is unlikely to overwrite all default configuration values, it is ideal if you can cache these default values for processing. For these configurations, you can make the following modifications to the class:

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

In most cases, these configurations are the same as the common configuration. However, when these configurations are cached, the configuration system performs some additional processing when the class creates the first instance.

First instantiation

Before the Configuration object processing of the first instance, the configuration system will only initialize from the default value of the class. The processing invokes the various apply and update methods, which in turn update the original build of the DOM element based on the element specification.

Consider the family configuration, which comes with the following update methods:

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

All the update methods help to set the default state of the DOM for the widget. Once the configuration is set to their default value, the Aftercachedconfig method is called. This method will only work at the first instantiation, and Ext.widget will deeply clone the resulting DOM tree (using the CloneNode (true) Dom API).

Second instance (and later)

When creating 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 the cost of re-processing the element specification and updating methods that run the default values. If the configured Update method is written correctly, the process is largely transparent.

Of course, Ext.widget has some work to do after copying the DOM tree, such as retrieving the reference to the element, encapsulating the listener, and setting the configuration property of any non-default value to the instance. However, the overhead is directly related to the number of configuration values given to the instance rather than the configuration properties of the class.

Reuse, Cycle

The following is a look at how to create and initialize a single widget, with several important concepts related to the use of widgets in Widgetcolumn.

Buffering rendering is critical because the constraints created are always focused. Using this method, the mesh renders a much smaller number of widgets and requires that the row be moved out of the scrolling area "after" and the new line is rendered "before" the loop is used.

When these transitions occur, Widgetcolumn will move the widgets in the DOM to the new row, dataindex the field data from the corresponding record and invoke the Setconfig of the widget to set its defaultbind properties, This will invoke the apply and update methods, so that the widget can now be reconfigured to display the new field values as long as the encoding is correct.

In the current sample widget, because it represents only an editable value, you need to check 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 the discussion of most widgets is related to grids, widgets can also be used anywhere in traditional parts. Scoring widgets introduced as mini widgets ext JS 5 has become a fact.

The following is the main panel of the sample application, showing 4 instances in its items array.

If you are familiar with the above, it is estimated that you already know 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'll use widgets instead of components? In many ways, writing widgets is simpler than writing components. This is especially true if you are purely using CSS to handle layout requirements. In addition, as we continue to combine the Sencha mobile and desktop frameworks, widgets will have cross-border possibilities in the future.

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

Don Griffin
Don Griffin is a member of the EXT JS core team. He is an Ext JS user for 2 years before joining Sencha and have over years of software engineering experience on a Broa D range of platforms. His experience includes designing Web application Front-ends and back-ends, native GUI applications, network protocols and Device drivers. Don's passion is to the build world class products, people love to use.

"Translation" Learn about the widgets of Ext JS 5