Ext js 4 countdown: Dynamic Loading and new class mechanism count down to ext JS 4: Dynamic Loading and new class system (on)

Document directory

• Class Definition
• Multi-state mixins
• Configuration item Automatic Reader auto setters and getters for configurations

Ext js 4 countdown: Dynamic Loading and new class mechanism count down to ext JS 4: Dynamic Loading and New Class
System
(I)

 

January 19,201 1 by Ed
Text Translation ext (ajaxjs.com) Frank

Http://www.sencha.com/blog/2011/01/19/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/

Ext js 4 is coming soon, and the official sencha.com/blogwill also release a draft introducing the new features of 4.0's new feature. Ext has made in-depth articles on 4.0 in the past few issues, hoping to synchronize with the official website and follow up on the new version. -- As for the time to release the code and the delay, the official government gave us the reason that we did not have to spend more time to perform internal Tests for stability, so we had to pay for it again and again. My personal impression is that ext never rashly acts on things. For better code quality, I would rather not adopt unstable solutions than code that I cannot afford to crack ...... Of course, what will happen when it comes out? Let's wait and see!

Below is the translation

Javascript itself does not have a class, so some novice developers feel unfamiliar with the environment here. However, through the powerful prototype pattern of the language itself, ext
JS implements a mature and full-fledged class mechanism system to further take care of our developers and write code using the object oriented approach!

We have injected more new functions for ext JS 4, and hope to make your development easier and more flexible. EXT
4. Four new functions will be introduced: class mechanism, multi-state Mixin, reader setter/getter and dynamic loading of configuration items.

 

The illustration above vividly introduces the class system. The focus is on the conversion of draggable and resizable into the Mixin form.

Class Definition

For different display, we use ext JS
3. Create a class for comparison. This is a window of the login function, which is extended based on Ext. Windows:

// Ext JS 3.x class definition <br/> MyApp. loginwindow = ext. extend (ext. window, {<br/> title: 'Log in', </P> <p> initcomponent: function () {<br/> Ext. apply (this, {<br/> items: [<br/>{< br/> xtype: 'textfield ', <br/> name: 'username ', <br/> fieldlabel: 'username' <br/>}, <br/>... <br/>] <br/>}); </P> <p> MyApp. loginwindow. superclass. initcomponent. apply (this, arguments); <br/>}< br/> });

Generally speaking, it is okay to define a class like this. However, if the Ext. Windows parent class is not defined, a new subclass will be created? Indeed, if we have not defined a namespace, it will also lead to errors. In the new method, the above two problems are solved:

// Ext JS 4.x class definition method <br/> Ext. define ('myapp. loginwindow ', {<br/> extend: 'ext. window ', </P> <p> title: 'Log in', </P> <p> initcomponent: function () {<br/> Ext. apply (this, {<br/> items: [<br/> // As shown above <br/>] <br/>}); </P> <p> MyApp. loginwindow. superclass. initcomponent. apply (this, arguments); <br/>}< br/> });

The Class Name of ext JS 4 can be written as a string, so that the above error is not guaranteed. Class Manager (Class
Manager) will be smart to see Ext. whether windows is defined. If not, create MyApp only after Windows is defined. the loginwindow class, that is, the internal process of "delayed creation. We no longer need to strictly follow the Loading Order in the program, and the framework has helped us deal with it.

Multi-state mixins

Text is just getting started, ext
The JS class also has many features to be discovered. The first introduction is the "mixins" capability of this framework. In the definition of polymorphism, multiple actions and configuration parameters are combined for reuse, and then "mixed into (mixed)" to a class. To implement this capability in the class you create, you only need to introduce the polymorphism class to your class. For example, you can drag your class and mix it with draggable.
Mixin class. There is no limit on the number of mixed classes. That is to say, this is an implementation scheme of Multi-inheritance, which can better solve the problem of JavaScript polymorphism. Classes with polymorphism can be defined as follows:

Ext. define ('sample. musician ', {<br/> extend: 'sample. person ', </P> <p> mixins: {<br/> guitar: 'sample. ability. canplayguitar ', <br/> compose: 'sample. ability. cancomposesongs ', <br/> SING: 'sample. ability. cansing '<br/>}< br/> });

Similar to the class definition, the referenced class name is a string, so no error is reported even if the page is not loaded. A class can be mixed into multiple classes. The method of polymorphism is as follows:

Ext. define ('sample. ability. canplayguitar ', {<br/> playguitar: function () {<br/> // code to play <br/>}< br/> });

Configuration item Automatic Reader auto setters and getters for configurations

You can customize ext by sending multiple configuration items
JS class. The getter and setter methods can also be used to read and modify these configuration item parameters. They can also be modified at runtime. There will be a large number of such requirements in the entire database. How to maintain them is a problem. EXT
JS 4 provides automatic getter and setter solutions for reading, writing, default value, and real-time application of configuration item parameters to ensure convenience and speed up your development process! Let's take a look at the example:

Ext. Define ('myclass', {<br/> config: {<br/> title: 'default title' <br/>}< br/> });

The class we set here only has a separate configuration item parameter title, assigned the titile default value "default title ". In ext JS
4. The getter/setter method is automatically assigned under the class mechanism. In the old 3.3 version, to achieve the equivalent method, we must write the manual code stiff:

Myclass = ext. extend (mybaseclass, {<br/> title: 'default title', </P> <p> gettitle: function () {<br/> return this. title; <br/>}, </P> <p> resettitle: function () {<br/> This. settitle ('default title'); <br/>}, </P> <p> settitle: function (newtitle) {<br/> This. title = This. applytitle (newtitle) | newtitle; <br/>}, </P> <p> applytitle: function (newtitle) {<br/> // here's the custom code <br/>}< br/> });

The framework automatically generates the above four functions. In many cases, updating variables (attributes) is sufficient, but it is better to change a configuration item in a specific way. For example, the title in the new class needs to be displayed in the DOM element. We can tell the DOM update, as shown in the following figure:

Ext. define ('myclass', {<br/> extend: 'mybaseclass ', </P> <p> config: {<br/> title: 'default title' <br/>}, </P> <p> applytitle: function (newtitle) {<br/> Ext. get ('tidel '). update (newtitle); <br/>}< br/> });

The class mechanism will automatically generate the above four functions, and we can rewrite the method (override) using the applytitle method in the above example ). The advantage is that it not only saves you slightly on writing code, but also reduces the size of your program. In other words, it allows your program to be downloaded to the client faster.

 

(To be continued ......)

----------------------------------------------------------------------------->

In the lower part, we will introduce the dynamic loading of ext 4 and explain the four examples provided by the official team. This is one of the features that ext has been strongly demanded since 1.0, or you may think it is the "most" requirement. Because the size of a single ext-all.js is too large, the customer not only downloads slowly, but also redundant code-although there are a variety of solutions online, but for years users have been tolerance, it is intended to provide useful guidance for officially provided solutions.