"Translation" to understand the Ext JS 5 gadget

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. In this article, you will create a simple widget named "ratings", for example, to see:

Entry

differs from the frequently used component derived from ext.component. The widget derives from the new base class Ext.widget. Also, 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 generated and connected to DOM events.

Rendering

For a widget, the first thing to consider is how to define its DOM tree, which is typically accomplished by specifying the element property in the class with the following code, for example:

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 basic new functionality is the reference and listeners properties.

These names are commonplace on the view controller. And the things they do on the widgets are similar. In Ext.widget, the reference property of all elements is cached in the widget instance with the name as the attribute value (e.g. element, Innerel, and so on).

Event

In the element above. 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 by name. Like what:

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 looks a bit similar to writing a traditional component class. But the obvious is the lack of initialization code and cleanup code. 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, here 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 were part of Ext JS from the beginning, not just in Ext JS 5 (or Sencha Touch 2.x). The framework has 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;    },     //...});

Such self-active processing mainly has the following significant advantages:

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

Developers can provide two key for whatever attributes. is also an optional method. such as family, are 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 executes the developer to convert the received value to the actual stored value. For many application methods, this might 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 all using that property.

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.

The last step is to add a class to the 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, assuming that the Update method for a configuration property requires a value for the configuration property. It calls for a Get method that also has a 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 required to maintain the DOM.

Because no matter what the given widget instance is, it is unlikely to rewrite all of the default configuration values. Assume that you can cache these default values for processing. Is the most ideal just. For these configurations, the following changes can be made to the class:

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

In most cases. These configurations are the same as the configuration that is used frequently. Only 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 simply initialize from the default value of the class. The processing invokes various apply and update methods. This in turn updates the original build of the DOM element based on the element specification.

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

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

The full Update method helps 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 only works at the first instance of the instantiation. Ext.widget will deeply clone the resulting DOM tree (using the CloneNode (true) Dom API).

Second instance (and later)

When you create an 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 overhead of processing element specifications and updating methods that perform default values again. Assuming that the configured Update method is written correctly, the process is largely transparent.

Of course. Ext.widget after copying the DOM tree, there is still some work to do, such as retrieving the reference to the element, encapsulating the listener, and setting the configuration property to the instance regardless of what is not the default value.

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 key because restricting the creation of instances is always a priority. Use this method. The grid renders widgets that are much less than recorded. And you need to use the row to move out of the scrolling area "after" and the new line to render "before" loop.

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 just encode correctly. Widgets can now be configured again to display new field values.

In the current demo sample widget, because it simply represents 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. But widgets can also be used for traditional parts wherever they are.

Scoring widgets introduced as mini widgets ext JS 5 has become a fact.

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

Assuming you are familiar with the above, it is expected that you have known the Sencha touch mode. Although these are extensions of EXT JS 5, Ext.widget is essentially the last version number of ext.abstractcomponent in Sencha touch.

So. Do you use widgets to replace components? In many ways, writing widgets is simpler than writing components. This is especially true if you are simply using CSS to handle layout requirements.

In addition, as we continue to combine the Sencha mobile and desktop frameworks. There will be a cross-border possibility for the widgets in the future.

The complete Code and demo sample of the new widget 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" to understand the Ext JS 5 gadget