Javascript-extjs-Class

Classes (Class)

preparation!

I'm using ext-4.2, and I'm going to get the following files after decompression.

There are few files to learn, now keep the following files and entire folders, then delete other files and keep the directory structure. The download for the base package is available at the bottom of this page.

The necessary ExtJS files are introduced in the ASPX page, Ext-all-dev can not be inductive, but it is used as debugging, so it is recommended to keep.

Test whether the program can run.

<script type= "Text/javascript" >    ext.onready (function  () {        Ext.MessageBox.alert ("title", "Hello");    }); </script>

View Code

Class

Custom Types

ExtJS allows you to create custom types based on the methods it provides, creating custom types using the Define method of ext. All classes registered with the Define method, the properties and methods of their instances are obtained from the prototype rather than from the constructor. The constructor is used only to initialize configuration information, binding properties, methods to the instance.

Ext.define (x, y)

X is a custom class, and Y is an anonymous object used to set class members.

<script type= "Text/javascript" >//parameter 1 is a namespace. Class name    //Parameter 2 is a member of the class, and all members are placed in an anonymous object .    //an anonymous object typically sets two properties,    //A property is a config that represents the configuration information that is used to store the properties and methods of the object    //a property is constructor, which represents the constructor of the class    //to make the properties, methods of the Config as properties of the class instance, the methods need to initialize them with initconfigExt.onready (function() {Ext.define ("Yin.person", {config: {name:Default, Age:20, say:function() {Ext.MessageBox.alert ("", This. name+ This. Age); },}, constructor:function(config) { This. initconfig (config);        }        }); //The constructor constructor is called when the new object initializes the config configuration information        varperson =NewYin.person ({name:Cold food, Age:32        }); Person.say ();//Cold FoodAlert (Yin.Person.prototype.hasOwnProperty ("say"));//true say method that belongs to the prototype object of the person classAlert (Yin.Person.prototype.hasOwnProperty ("name"));//true Name property belongs to the property of the person class's prototype objectAlert (Yin.Person.prototype.hasOwnProperty ("Age"));//True The Age property belongs to the properties of the prototype object of the person class    }); </script>

View Code

Where did the initconfig come from? The parser will find the Initconfig method on the object, and if it does not find it, it will go to the prototype chain, so initconfig can determine that it is a prototype object from the class, and by invoking the Initconfig method of the prototype, the method will traverse the config internally. It then takes each attribute out one by one and assigns it to the prototype object itself. So the instance object of the class is derived from the principle of the prototype inheritance. In addition, if we do not set config in the new object, then in the constructor, This.initconfig (config), and how to initialize name, age, and say? The reason is simple, the Config property and the constructor property are in the same block (scope), so if you instantiate the person class without displaying the specified config, the config in the constructor comes from the Config property that is in the same scope as it.

Get and set accessors

Classes created with the Define method of Ext get the GET, set accessor defined on the Ext prototype object, which is designed to get the properties or methods of (get) and set (set) objects, and note that once the code logic of the property or method has been modified through the set accessor, Then the modified property or method will automatically become the original member of the current object (this is the understanding after I test, not guaranteed correct).

Person.getname (); // return to Cold food person.getage (); // returnto Person.getsay (); // return to say method person.setname ("Sam"); // Modified value person.setage (50); // Modify the value Person.setsay(function () {// Modify Method    Ext.MessageBox.alert ("", " My name is: "+ this. age);});

View Code

Class inheritance

Extend:z

Z is the parent class

Class inheritance can also be done using the Define method of Ext, which simply indicates the Extend property in parameter two (anonymous function), which indicates that the current class will derive from the class that the extend points to. We assume that X is to derive from Y, and that the extend of X should point to how y,x obtains the members of Y? Y.prototype will copy the members of their own to x.prototype, it is so simple.

<script type= "Text/javascript" >Ext.onready (function () {        //Create Person classExt.define ("Yin.person", {config: {name:Default, Age:20, say:function() {Ext.MessageBox.alert ("", This. name+ This. Age); },}, constructor:function(config) { This. initconfig (config);                      }        }); //Create a man classExt.define ("Yin.man", {extend:"Yin.person",//indicates derived from the Yin.person classContructor:function () {                 This. Initconfig ();        }        }); varMan =NewYin.man (); Man.say ();//The Say method that inherits the person    }); </script>

View Code

Object inheritance

Object inheritance uses the Ext.apply method, similar to class inheritance, where an X object inherits from the Y object by actually simply copy the members of the Y object to x completely, and if X already has a member with the same name as Y, the new overwrite is old. If you do not want to overwrite, you can use Ext.applyif.

var obj = {gender: "male" }; var obj2 = {name: "Sam" }ext.apply (obj2, obj); alert (obj2.gender);

View Code

Class multiple Inheritance

MIXINS:[X1,X2]

X is the class name

Ext in order to solve the problem that a class can only derive from one class and not derive from more than one class, the use of mixed mixins, in effect, is to copy the members of the prototype of multiple classes to a class that requires multiple inheritance.

Ext.onready (function() {Ext.define ("Yin.person", {config:{name:Cold food}, constructor:function(config) { This. initconfig (config);}    }); Ext.define ("Yin.employee", {config: {job:Design}, constructor:function(config) { This. initconfig (config);}    }); Ext.define ("Yin.husband", {config: {age:"32"}, constructor:function(config) { This. initconfig (config);}    }); Ext.define ("Yin.man", {extend:Yin.Person, mixins: ["Yin.employee", "Yin.husband"]    }); varMan =NewYin.man (); varName=man.name;//Cold Food    varAge=man.age;// +});

View Code

Static members

statics:{}

If you want to define static members for a class, you can use statics.

Ext.define ("Yin.person", {    statics:{        ancestor:"monkey"    },    config:{name:"cold Food" },    functionthis. initconfig (config);}); Yin.Person.ancestor//Monkey

View Code

ExtJS Component Classes

Learning ExtJS is mainly to learn to configure and assemble various components, so the use of object-oriented thinking to create a custom class This form certainly does not seem to be necessary.

Ext.component class

All visual components in ExtJS are derived from ext.component, which has some of the most basic properties for controlling the styling of components that are rendered on HTML, such as when we are rendering a gray box to an HTML page, which can be set as follows:

<div id= "Divbox" ></div><script type= "Text/javascript" >    ext.onready (function  () {        varnew  ext.component ({            "Divbox",            " Background-color: #1E1E1E; margin:200px auto; " ,            width:+,            height:+        });        Box.render ();    }); </script>

View Code

Ext.container class

Derived from the Ext.component class, which provides two of its key parameters: layout and items.

Properties of the container

Layout:border |

Indicates how the component is laid out on HTML.

Items: [obj, obj]

Indicates all subcomponents of the current component, and the subcomponents appear as {}.

Properties of items

Xtype: The character representation of a component

Indicates what type of subassembly is, and the value is the first-letter lowercase component name. Previously you might have indicated that the items would be directly new to the subassembly, and now you only need to indicate xtype, such as to create a panel component in the current component:

// the previous wording items: [    new Ext.panel ({title: "Subject", Region: ' North '),    new Ext.panel ( {title: "Menu", Region: ' West ', Width:100})] // today's notation items: [    ' Panel ', Region: ' North ', title: ' Theme ' },    ' panel ', Region: ' West ', Title: ' Menu ', Width:100 }]

View Code

Ext.Util.observable class

Only components that inherit Ext.Util.observable have events, and as programmers almost only need to handle events such as mouse keyboard form document loading, this is skipped here.

Ext.eventobjectimpl class

The event object for JavaScript is encapsulated by ExtJS as Ext.eventobjectimpl, which consolidates custom events, browser events, and DOM document events, so the component that owns the event, the ExtJS object, Dom objects inherit Eventobjectimpl, and we can perform a series of operations by inheriting the properties and methods eventobjectimpl the component when the event occurs.

Methods of Ext.eventobjectimpl

GetX () | GetY () | Getxy ()

Gets the x, y coordinates of the object in the document that triggered the event when the event occurred. The last method returns the array, Getxy () [0] obtains the x-coordinate, and getxy () [1] obtains the y-coordinate.

Gettarget ()

Gets the source object that triggered the event.

Preventdefault (BOOL)

Whether to block browser default actions.

Stoppropagation (BOOL)

Whether to block event bubbling. It seems that both jquery and ExtJS do not support event rounding.

Stopevent ()

Stop the event immediately. The method internally calls Preventdefault () and stoppropagation () two functions, canceling the browser's default action while stopping event bubbling.

Purgeelement ()

Clears all events for which the object is locked.

On | Un

binds the event listener (listener), and cancels the event listener (listener).

<input id= "Test" type= "text"/><script type= "Text/javascript" >    ext.onready (function  () {        //E is the object that triggers the event, where E is the keyboard, and E is the instance        function of the Ext.eventobjectimpl (e) {            if (e.charcode = = e.space) {                Ext.MessageBox.alert ("", "you pressed the spacebar"  );            }        });    }); </script>

View Code

ExtJs4.2 Basic Package ↓

Javascript-Learning Total Directory

Javascript-extjs-Class