Ext js advanced plug-in development tutorial

Document directory

• What is an ext plugin ?)
• Steps for adding a function (Approaches to adding functionality)
• Implement a plug-in implementing a plugin
• A fieldlabeler plugin
• Summary

November 11,200 9 by Nigel white Translation: Frank Cheung (zhangxin)

Ext js advanced plug-in development tutorial advanced plug-in development with ext JS

When creating a cross-browser rich client application, most of us should first consider selecting a framework with a large number of components. However, when the framework does not meet the specific components or functions we need, the problem will evolve into whether it can allow you to flexibly strengthen and expand its products and become very important. Fortunately, ext
JS not only has rich UI functions, but many people in our active community have created impressive extensions suitable for most applications. But sometimes you need to add additional features for some components that are not enough to use, ext
The elegant design of JS allows us to add new functions from existing components and customize components as needed. We will handle this advanced task in multiple ways.

What is an ext plugin ?)

What is ext plug-in? Any component has a plug-ins

Allows developers to define plug-ins. The plugings config points to the so-called "ext plug-in" object, which can be encapsulated in the form of a class or Singleton. Any plug-in must provide an init method, which is the initialization method of the component. When will this method be executed? It is at the beginning of the component life cycle, when the component is rendered. When the init () method is executed, the current component object is sent to it as a parameter of the component type.

How do I implement interaction control between components and plug-ins? We can discuss the process of initializing the plug-in itself and how it is combined with the components it serves (that is, the "client component.

In general, you can select some new methods before or after the customer component method (Augmenting

Certain methods, briefly described as "method + method") to form a new method. This sentence seems a bit confusing and does not seem to work out. What should I do? I will talk about it below. To meet the preceding tasks, a new method needs to be added to the extended function prototype. Ext has all functions in Javascript

Type added to createinterceptor

Or createsequence

. The functions of these new functions are also described in the following sections.

Steps for adding a function (Approaches to adding functionality)

When the ext component fails to meet the requirements of program development, it is necessary to enhance the component functions; or you need to modify the existing components. As we know, there are several methods or strategies for implementation. Let's take a look at their advantages and disadvantages.

For example

In the layout container, form fields accepts the configuration items of filedlabel. Let's think about it. Our requirement is to manually render fields as two lable, that is, to expand the new input box. What should I do? Don't worry too much. There are different ways to flexibly add this new feature in ext.

Here are three possible methods:

Option 1: component configuration parameter component configuration

Can I use the listener of the input control fields object to broadcast a group of events? Yes. developers can use the publish interface of the textfield class to develop the above functions. Specifically, you can set listeners.

. Or after the component is instantiated, The on

Method To set the event processor.

In an integrated solution, configuration items are often the simplest. However, as different scenarios change, different configuration item parameters are available, and the copy and paste code may be messy. Obviously, we cannot use this method in this example, because it is impossible for every field to carry long code.

In addition, if the event is aborted

If it is canceled by the current event processor, the added listener will be invalid. This is a disadvantage of this method.

Option 2: Create a subclass create a subclass

Write a new subclass from which developers can rewrite the template method (described later) to participate in the process control of Component Construction and lifecycle. The added function can be executed before or after a parent class method with the same name as the parent class is called.

One example is self labeling textfield.

Class.

The disadvantage is that, to add new functions, this method disconnects the existing Inheritance layers, "isolates" the relationships between existing classes and subclasses, and other classes cannot access new functions.

In this example, we have created an enhanced textfield to render our own label. However, subclasses such as triggerfield, textarea, and numberfield cannot use new functions.

Another disadvantage is that if two sub-classes need the same function, classes and classes cannot be shared, so this method is powerless.

Option 3: Create a plug-in

Create a plugin

If you have a good idea about writing a plug-in, this is a solution with the highest code reuse rate and the highest flexibility. A class plug-in can also be used by any layer of sub-classes. In addition, components support multiple plug-ins to be called at the same time. Of course, components cannot conflict with each other.

Implement a plug-in implementing a plugin

Before we really understand the plug-in, let's take a look at howFailed
Event to enable the existing functions of the ext component and its plug-in to generate the necessary link for the root node. The reason for not using the event is that the event processor cannot ensure that the listener of our plug-in is called at or after the previous time. In addition, the listener may also execute the suincluded

Suddenly stopped.

Relatively, by adding specific methods to components, we can allow them to "be controlled by their plug-ins" in a critical moment and key point of the component's life cycle ".

Template Method mode the template method pattern

Ext js uses the Pattern Theory of the template method at the object level of its components

To generate tokens for specific actions. Each subclass has its own behavior.

This means that every class in the inheritance chain can adapt to a specific stage in the component life cycle, so that the logic to be added can be quickly "involved. In each stage, the class implements its own behavior function. Next, another class in the inheritance chain will continue to "participate in the logical block of the Stage" and perform their respective duties. In general, the template method is a bit similar to the event, but the template method is a built-in process that defines a certain feature in the component life cycle. Compared with the event method, the template method is slightly loose.

Render

A function is an example. It does not need to overwrite or copy complex code. Every subclass can implement the template method or hook (hooks), which will be provided to you. The two hooks executed during component rendering are onrender and afterrender. You can add any template method to the instance of each sub-instance. When the parent class hook is called, the entire inheritance level is also up. We can not only cleverly maintain the inheritance chain, but also further involve our own behaviors.

As shown in the figure, the template methodOnrender

How to complete the inheritance chain in the component. Execution of the current subclass instanceRender

The method is the execution subclass.This. onrender

The method starts with the onrender of the subclass (if any ). For example, I wrote a panel named mypanel.

The extension subclass is being rendered. At this moment, mypanel. onrender will be called first. The execution process of this method is actually different from that of the Panel class. The version of its parent class is different from that of the Panel class, And the level-by-level parent class is different. The specific code involved in each class is a process. Each time there should be a return result, and finally, after this. onrender is completed, it will still be returned to the render function.

There are several template methods in the production cycle of ext JS component running for you to conveniently set and display fixed points for specific classes and for practical use.

The template methods for all component subclasses include:

• Onrender

  Allows new actions to be added during rendering. When the onrender of the parent class is called, the component element is created. Additional Dom processing methods can be added at this stage to meet specific requirements.

• Afterrender

  Add new actions after rendering. In this phase, components are added to the element style, the CSS style name to be added, the configuration accessibility, and whether to activate the style based on the parameters of the configuration item.

• Onadded

  Allows you to add new actions after a component is added to a container. When onadded of the parent class is called, component hasownerCt

  To execute the reference of its parent container.

• Onremoved

  Allows you to add new actions after a component is removed from a container. When onremoved of the parent class is called, no componentOwnerct

  Reference.

• Onshow

  New actions can be added after the display operation. After onshow of the parent class is called, the component is displayed.

• Onhide

  New actions can be added after the hidden operation. After onhide of the parent class is called, the component is hidden.

• Ondisable

  Allows you to add new behaviors after the operation is disabled. When the ondisable of the parent class is called, the component is disabled.

• Onenable

  New actions can be added after the activation operation. When onenable of the parent class is called, the component is activated.

• Ondestroy

  New actions can be added after the destruction operation. When ondestroy of the parent class is called, the component is destroyed.

In addition, there are other child widgets under Ext. They all add new template methods based on different requirements. For more information about how to add a new process to the template method, see ext official site "learning area ".

Use ext
Create a new UI control in JS

Article.

Template Construction Method
Hooking into template Methods

If you need to insert additional function code to the component template method at the time point of execution, you must use the FunctionInterceptors

And functionsSequences

. What are their tips? Let's take a look.

Interceptors

Interceptors
) Indicates that a function is executed in a known function.Before

It must be run. For example, the application is disconnected from
Observable

Fireevent

Insert some code before the method, such as the Log Code, so that you can observe the event execution in firebug. (advice,Multiple

!).

// A class's methods are stored in its <B> prototype </B>, so grab that. <br/> var o = ext. util. observable. prototype; </P> <p> // This is the function we will be executing <B> before </B> the real fireeventmethod. <br/> // it will be passed all the same argments, and has the same scope (this reference ). <br/> // log the firer, the event name, and the arguments to the console. </P> <p> function fireeventinterceptor (EVT) {<br/> var A = arguments; <br/> var MSG = "fired the following event {0} with ARGs"; </P> <p> console. log (this); <br/> console. log (string. format (MSG, EVT); <br/> console. log (array. prototype. slice. call (A, 1,. length); <br/>}</P> <p> // set the class's fireevent to be our interceptor. <br/> O. fireevent = O. fireevent. createinterceptor (fireeventinterceptor );

That's simple. The method we write is always called before ext's original fireevent method.

Sequence
Sequences

Sequence indicates that a function is executed in a known function.Later

.

Sequences is used to add the control process of the plug-in after field rendering.

A fieldlabeler plugin

In this example, the plug-in is displayed as a singleton and cannot be instantiated. The usage is as follows:

Plugins: [Ext. UX. fieldlabeler]

Fieldlabeler associates his method with the filed template method. Field execution is like executing its own member method. Itsthis

The reference is the field itself, so the Code required for any stage in the life cycle can be executed. This is the reason for the Singleton. -- All context information is included in the client component.

The method associated with the plug-in includes the following three methods:

• Onrender

  The newly added code is responsible for rendering other DOM elements.

• Onresize

  The new Code ensures that other DOM elements are properly adjusted.

• Ondestroy

  The new Code ensures that other DOM elements are cleared immediately.

With the plug-in, we solve the problem that the downstream plug-in cannot receive new functions, which is better than writing as a subclass. This plug-in has
The ability to integrate triggerfield, textarea, and numberfield.

Check out the example of this plug-in.

. The source code has been thoroughly documented and readable. Here

.

Summary

This article explores how to create reusable plug-ins from multiple perspectives to enhance custom functionality. This is done without breaking down or dismounting the hierarchy.
Based on the existing ext, it is a very appropriate method to use plug-ins to add the original functions of Ext, especially when mixing or matching new functions.
Among them, the key point is that in the life cycle of the component operation, you must ensure that the component will certainly execute those functions and add additional function code on the component method. We recommend that you take a look at the ext Forum plug-in examples. There are thousands of plug-ins. We hope that you will be interested in developing ext plug-ins to benefit the ext community.

 

Original translation. If reposted, Please retain the author and website.