Some tips and tricks for customizing the EXT component

"Tips and Tricks for ext JS Component Developers" August, by Aaron Conran reproduced please indicate EXT Chinese network.

ExtJS provides common components by default, but it is almost impossible to include all of the requirements. So there is a need for custom components. It is gratifying to find that today's Sencha community has a high-quality Ext component community to form an affluent ecosystem. And here, I'll introduce you to some tips and tricks on how to write components. a method call with buffering

When receiving a large number of events, such as floods, ExtJS allows you to buffer the execution of these events and how to execute them. is to set a predetermined time before the event is triggered and wait until the time has passed before it is executed. This is helpful not only for improving performance, but also for reducing network traffic. For example, we have a Grid of primary and secondary relationships, which updates the display of detailed information based on the value of the record, at which point we implement it through an AJAX request. The following code may appear:

var sm = This.getselectionmodel (); Sm.on (' Rowselect ', this.ongridrowselect, this, {buffer:300});

EXT does not execute the Ongridrowselect () method until the user clicks on a line plus 300 milliseconds. This event handling method is quite typical in Ext. If you are not familiar with the available configuration options, you should look at the AddListener in the document, which has many options, such as buffer and single, that are useful.

EXT uses Ext.util.DelayedTask to achieve that kind of buffering effect, which is a low-level class. Delayedtask a useful class that can be packaged to perform a bulk operation. For example, when manipulating the DOM, avoid executing multiple steps at the same time using slow-time policies to accomplish this. In other words, you should put the heavy processing work into another function and then use Delayedtask, and specify a certain amount of time.

When you create a Delayedtask class, you specify the function you want to perform as the first parameter of the constructor. A more common type of class is written as follows:

The Public API Something:function () {if (!this.somethingtask) {this.somethingtask = new Ext.util.DelayedTask (this.dosome thing, this); } this.somethingTask.delay (This.somethingtaskdelay); },//private dosomething:function () {//heavy processing which needs to be buffered alert (' Something executed! ');

This will allow your user component to perform "something" several times on a single line, while "dosomething" will only be executed after "Somethingtaskdelay". When interacting with the DOM (such as Dom Reflows), it is easy to optimize time-consuming and unnecessary operations. allows the user to invoke the method before rendering the component

When writing a component, you or often have the requirement that it is sufficient to perform only once before rendering, but it can be performed many times after rendering. To do this, you can check the tag of the "rendered" property to determine if the component has been rendered, and then set up a one-time event handler to recall the method after the component is rendered. Later, the user of the component is allowed to call this method at any time in the component life, whether or not the component is rendered.

Somemethod:function () {if (!this.rendered) {This.on (' render ', This.somemethod, this, {single:true}); Cal processing}

Another common example is that the user wants to call that method multiple times, but only once after rendering. This implementation is as follows: Somemethod:function () {if (!this.rendered &&!this.somemethodeventsetup) {This.somemethodeventsetup = True This.on (' Render ', This.somemethod, this, {single:true}); Return }//Typical processing} provide event at a certain time

Custom components should provide relevant event support at certain critical times, such as when a component is expanded or contracted. Since your components are Ext.util.Observable subclasses, you will get the "addevents" and "FireEvent" methods by inheriting. The role of "addevents" is to define component events. The role of "FireEvent" is to notify an abstract subscriber that an event has occurred, not limited to the number of times. If you want to study, please look at the EXT JS component source code to learn where to add events.

Event should: Provide information on what exactly happened at that time should provide a "beforexxx" event that occurs before the original event and can be canceled for the xxx event in the "Beforexxx" event so that the next XXX event does not occur

To define an event in an assembly, you can "add" or define an event in the InitComponent () initialization component method. Each event you trigger should be defined by the Addevents () method.

For example:

Initcomponent:function () {MyCustomComponent.superclass.initComponent.call (this); This.addevents (' BeforeExpand ', ' Expand '); },

You can invoke the FireEvent method to trigger the event. The first parameter is the event name, and other additional parameters are passed to the event handler.

For example:

This.fireevent (' Expand ', this, CMP, E);

Suppose in the Ext.container container, we intend to expose an unfolding Expand event, and then execute a method of the container itself (in fact, the container expands, so to speak, the DOM event triggers the behavior of the Expand event). This process is simple and can be defined using the On ()/addeventlistener () method:

Myct.on (' Expand ', Function (CT, CMP, e) {});

It is important to allow a user to cancel an action by providing a "trailer event". In Ext JS, if you return false in any of the "trailer events," The real target event will not trigger execution. Because the events in Ext JS are synchronized and the event handler does not return false, the actual execution will actually occur, as in the following example:

if (this.fireevent (' BeforeExpand ', this, CMP, E)!== false) {//execute expand this.fireevent (' expand ', this, CMP, e);}

By understanding this pattern similar to the EXT JS component, as often as possible, other developers will feel that the components you write to make them more familiar with the ground hand, and can be more relevant to their applications in order to modify ... comment on your code

A good quality of the source code how can be less clear and readable notes. Yes, don't be lazy, give your comments on public methods, public properties, configuration items, and so on. Even if it is their own procedures, it is best to develop the habit of writing notes. It's certainly better to read the text than it is for yourself and others, especially if you look back at the code every few days. Ext is a comment that uses a specification similar to JSDoc (but with some inconsistencies). You can use the EXT Doc project to generate your own written notes. Conclusion

Calculate, since I write a blog has been a while, during the period to see many developers write components have such or such problems or deficiencies. In view of this, I hope that by constantly emphasizing these common patterns, it is possible not only to give developers new inspiration, but also to improve the quality of the components of the practical ways. There are also suggestions that we should look at our user extension area. Of course, we also encourage you to submit your works, so that after the use of many people, there will be many tests and feelings. Break through some of the limitations of the original domain, this is the community to give component development of an art.

Seeing and following, many developers are already experienced developers, and therefore sincerely hope that you share your experience or skills, and comments, which are very beneficial to the community as a whole. If you just want to expand the Ext JS component, it does not matter, in fact, this is to explain the missing components Ext JS-This is also we need to listen to the community's important voice.