- Ext.define: 是Ext.ClassManager类的create方法的简写,该方法负责一个新的Class的创建,此外,也可以重写已有类的属性和方法。
- Ext.create: 是instantiate方法的简写,该方法用来创建已存在的类的实例。
- Ext.widget: 它的完整形式是Ext.ClassManager类的instantiateByAlias方法,该方法可以通过类的别名来获取一个类的实例。
Ext.define( "Person",{ //#1 name: '张三', //#2 age: 23, constructor: function(config) { //#3 Ext.apply( this,config||{}); //#4 console.log( "I'm a new client" ); } }); var person1 = Ext.create( "Person"); //#5 console.log(person1.name); var person2 = Ext.create( "Person",{ //#6 name: '李四' }); console.log(person2.name); person2.age = 12; //#7 console.log(person2 .age);说明:
#1: 给Ext.define传递一个字符串形式的参数作为类的名字,在这儿我们定义了一个Person类
#2: 第二个参数是一个对象,定义类的属性和方法,这里定义了name和age两个属性值。
#3: constructor这是一个特殊的方法,相当于java中的构造方法,在类被创建时ClassManager会自动调用,如果没有定义,它将会是一个空函数。
#4: 在创建类实例的时候,我们通过参数config对象设置新值,config的内容应该是能够修改的类的属性,通过这种方式我们就可以在不同的类的实例中设置不同的属性值,如果我们没有设置任何参数,那新的实例将采用默认值。
#5: 通过Ext.create方法创建类的实例,该方法的第一个参数是类的名称,在这儿采用默认值得方式创建实例person1。
#6: 通过第二个参数给person2这个实例设置新的name属性值。
#7: 通过对象实例修改实例的属性值。
![](https://i-blog.csdnimg.cn/blog_migrate/7fd0f6b763388f9ad0603ab76c857785.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fba2d0f53a69dba209019464ae47f4f9.png)
在实际的类的定义中,我们往往需要继承其它的类而不是Ext.Base,这时就需要我们配置extend属性,这就会继承父类的所以的属性和方法。
Ext.define( "User",{ extend: 'Ext.data.Model', //#1 fields: [ //#2 'id', 'name' ] }); var user = Ext.create( "User",{ //#3 id: 001, name: '张三' }); console.log(user.get("name")); //#4
#2: 创建fields字段,这个字段可以根据需要添加任意数目的字段。
#3: 创建一个User类的实例,通过第二个参数设置fields字段的值。
#4: 输出数据,查看结果,这儿注意的是在User类中并没有定义get方法,所以该方法是继承得来的。
- 前置处理器: 预处理器是在Ext.Class类的实例被执行之前运行的处理器,也就是说在类创建之前,预处理器有可能会改变类的属性状态等行为。
- 在类被创建之后执行的process,例如类的单例,类别名等都是后处理器完成的。
(function() { Ext.onReady(function() { var pre = Ext.Class.getDefaultPreprocessors(), post = Ext.ClassManager.defaultPostprocessors; console.log(pre); console.log(post); }); })();运行代码可以看到控制台输出如下
![](https://i-blog.csdnimg.cn/blog_migrate/2440278a203c31755a0fe08cd453240a.png)
通过上面的输出我们可以看到在ExtJS类系统中定义了一系列的前置处理器和后置处理器,共同完成了类的创建工作。把下面的输出转换为直观的图形表示如下。
![](https://i-blog.csdnimg.cn/blog_migrate/228f121fceedf9814f203e3435b14356.png)
- 前置处理器
| This defines the namespace and the name of the class. |
| This looks for the dependencies and if they don't exist already then it tries to load them. |
| This inherits all the methods and properties from the superclass to the new class. |
| This creates the defined static methods or properties for the current class. |
| This inherits the static methods or properties from the superclass, if applicable. |
| This creates the getters and setters for the configurations properties. |
| This inherits all the methods and properties from the mixin classes. |
| This defines the xtype for the new class. |
| This sets the alias for the new class. |
- 后置处理器
| This registers the new class to the class manager and its alias. |
| This creates a single instance of the new class. |
| This defines alternative names for the new class created. |
| This imports the classes that will be used, along with the new class. |
(function() { Ext.onReady(function() { Ext.define( "say",{ cansay: function() { console.log( "hello"); } }); Ext.define( 'CanSing', { sing: function() { console.log("I'm on the highway to hell..."); } }); Ext.define( "user",{ mixins: { say: 'say', sing: 'CanSing' } }); var u = Ext.create( "user"); u.cansay(); u.sing(); }); })();
Ext.define( "MyApp.data.Invoice",{ config : { //Step 1 client : '', tax : 0.083, subtotal : 0, total : 0 }, constructor : function(config){ var me = this; me.initConfig(config); //Step 2 } }); var invoice = Ext.create( "MyApp.data.Invoice",{ client : "Tuxtux Inc", subtotal : 100, total : 108.3 }); console.log(invoice.getClient()); console.log(invoice.getSubtotal()); console.log(invoice.getTax()); // 0.83 console.log(invoice.getTotal()); invoice.setTax(0.16); console.log(invoice.getTax()); // 0.16说明:Step 1: 首先,我们需要定义一个预处理器config,它允许我们配置一个由我们所需要的属性所组成的对象,也可以为每一个属性设置默认属性值。
Step 2: 我们在构造函数中利用 initConfig方法把config参数初始化到config配置项的属性中。initConfig方法是在Base类中定义的,所以每一类都拥有这个方法。
在执行完上面两个步骤以后,我们就可以用get方法取到相应的属性的值,当然我们也可以使用set来改变相应的属性值。
Ext.define( "User",{ statics: { myname: 'zhangsan', say: function() { var str = "My name is " + this.myname; console.log(str); } } }); User.say()
Ext.define( "MyApp.Constants",{ singleton : true, //Step 1 BASE_PATH : "/myapp", //Step 2 ATTEMPTS : 5, TIMEOUT : 6000 }); console.log(MyApp.Constants.BASE_PATH); //Ext.create("MyApp.Constants"); //Throws an error
Ext.define( "MyApp.abstract.Panel",{ extend : "Ext.panel.Panel", alias : "widget.mypanel", title : "Abstract panel", html : "Main content" }); Ext.onReady( function(){ Ext .create("widget.mypanel" ,{ //Option 1 renderTo : Ext .getBody() }); //Option 2 Ext .ClassManager.instantiateByAlias("widget.mypanel" ,{ renderTo : Ext .getBody() }); //Option 3 Ext .ClassManager.instantiate("widget.mypanel" ,{ renderTo : Ext .getBody() }); var win = Ext .create("Ext.window.Window" ,{ title : "Window", width : 350, height : 250, items : [{ xtype : "mypanel" //Option 4 }] }); win.show(); });首先,我们在定义类的时候使用alias属性便可以为这个类设置一个别名,在这里,使用widget前缀表明我们创建的是一个组件类。带别名的类定义完成以后,共有四种利用别名来使用组件类的方法。
- 使用Ext.create方法,我们不但可以类的全称也可以使用类的别名来创建类实例
- 使用Ext.ClassManager.instantiateByAlias方法来创建类的实例
- 用Ext.ClassManager.instantiate方法完成实例创建,这种方法实际上是跟create是一样的。
- 用xtype属性类实例化组件,使用这种方式的时候不需要widget前缀。widget是一个Ext标识,表明我们创建的是一个component组件,而xtype只能初始化组件,所以假定需要xtype初始化的都是有widget前缀的。