ExtJS learning ------ Ext. define inheritance extend, using javascript to implement inheritance similar to Ext, extjsext. define

Source: Internet
Author: User

ExtJS learning ------ Ext. define inheritance extend, using javascript to implement inheritance similar to Ext, extjsext. define

(1) Ext. define inheritance extend

Specific instance:

Ext. onReady (function () {// Sup Class parent Class Ext. define ('person', {config: {name: 'bjsxt '}, constructor: function (config) {var me = this; me. initConfig (config) ;}}); // Sub Class subclass Ext. define ('Boy ', {// use Ext to inherit extend: 'person', // directly inherit config: {sex: 'male', age: 20 }}); var B = Ext. create ('Boy ', {name: 'zhang san', age: 25}); alert ('name:' + B. name + '-- Gender:' + B. sex + '-- Age:' + B. age );});

Instance result:


(2) use javascript to implement inheritance similar to Ext

Instance:

Ext. onReady (function () {// javascript: prototype (prototype): Implement inheritance // SupClassvar Person = function (name) {this. name = name ;}; // alert (Person. prototype. constructor); // constructor of the prototype object. The default value is the template of the current class. // SupClass prototype objectPerson. prototype = {constructor: Person, id: 100}; // SubClassvar Boy = function (name, sex, age) {// borrow the method inherited by the constructor: Person. call (this, name); this. sex = sex; this. age = age ;}; // implement prototype inheritance: inherits the template of the parent class and the prototype object of the parent class. // Boy. prototype = new Person (); // function myextend (sub, sup) {var F = function (){}, // define an empty function as the transit function subclassProto, // prototype object of the subclass // hand over the prototype object of the parent class to the superclassProto variable superclassProto = sup. prototype; // The intermediate position: Assign the prototype object of the parent class to the prototype object of the empty function F. // inherit the prototype F. prototype = superclassProto; subclassProto = sub. prototype = new F (); subclassProto. constructor = sub; // restores the constructor sub. superclass = superclassProto; // saves the prototype object of the parent class. // The purpose is to prevent you from ignoring if (superclassProto. constructor = Object. prototype. constructor) {superclassProto. constructor = sup ;}}; myextend (Boy, Person); // self-implemented Inheritance Method var B = new Boy ('lily', 'mal', 25 ); /// * Note: Traditional javascript methods inherit * Boy. prototype = new Person ('Li si'); * var B = new Boy ('male', 25); */alert ('name: '+ B. name + '-- Gender:' + B. sex + '-- id:' + B. id + '-- Age:' + B. age );});

Instance result:



Extjs learning problems, really depressed recently want to learn extjs, download the ext-230 on the official website, always don't do well

First, the problem may be that the order of the ext package is wrong. We recommend that you write the package order according to the api documentation ,,,
I don't know much about others. I am also a beginner. If you are interested, you can communicate with me. In fact, for beginners, just look at the api and examples. ext4.0 charges fees, so if you don't need it very much, don't use 4.0 or less ,,

How does Extextend inherit objects on the page?

MyPanelUi is to continue from Ext. Panel, so you should use a new one, and the code is:
Var mypanel = new MyPanelUi ();
Mypanel. render ("hello ");

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.