- 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: 通过对象实例修改实例的属性值。
在实际的类的定义中,我们往往需要继承其它的类而不是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); }); })();运行代码可以看到控制台输出如下
通过上面的输出我们可以看到在ExtJS类系统中定义了一系列的前置处理器和后置处理器,共同完成了类的创建工作。把下面的输出转换为直观的图形表示如下。
这张图表明了在创建类的时候发生了什么,所有的前置处理器处理相关的信息为类的创建准备好条件,所有的后置共同完成类的后续处理。下面通过表格简要描述了各个处理器的功能和作用。
- 前置处理器
|
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前缀的。
相关推荐
Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4 API文档阅读(四)——Data ...
第一部分:概述。说明了强大的类机制的必要性 第二部分:编码规范。讨论类、方法、属性、变量和文件命名 第三部分:DIY。详细的编码示例 第四部分:错误处理和调试。提供一些有用的调试和异常处理技巧
}自定义配置如果需要自定义ExtJs的app.js路径'controllerMap' => [ 'site' => [ 'class' => '\wsl\rbac\controllers\SiteController', 'extJs' => [ 'appPath' => '/app.js', ], ], ... ],注: ...
外观皮肤化,可以做成不同的风格包,随意更换系统外观,这点是继承了EXTJS的特点。 3。支持多语言。iejoyswebos拓展了语言包,可以支持多语言,而且增加语言包也非常简单 4.动态加载所需的JS和CSS文件,JS文件已...
[信息办公]ExtJS 2.2 图书管理系统_bmsh [信息办公]iCan网络秘书_ican [信息办公]JSP班级管理系统_class [信息办公]Struts图书馆管理系统_struts [信息办公]TaokeOCS 淘客在线客服管理系统 开源版_taokeowebkf [信息...
外观皮肤化,可以做成不同的风格包,随意更换系统外观,这点是继承了EXTJS的特点。 3。支持多语言。iejoyswebos拓展了语言包,可以支持多语言,而且增加语言包也非常简单 4.动态加载所需的JS和CSS文件,JS文件已...
修改数据库密码 <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="password" value="neostudio"/> 这个两个部分part2和part1
毕业设计-酒店住宿管理系统(源码共享) ...修改数据库密码 <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="password" value="neostudio"/> </bean>
修改数据库密码 <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="password" value="neostudio"/> 这个两个部分part2和part1
外观皮肤化,可以做成不同的风格包,随意更换系统外观,这点是继承了EXTJS的特点。 3。支持多语言。iejoyswebos拓展了语言包,可以支持多语言,而且增加语言包也非常简单 4.动态加载所需的JS和CSS文件,JS文件已...
外观皮肤化,可以做成不同的风格包,随意更换系统外观,这点是继承了EXTJS的特点。 3。支持多语言。iejoyswebos拓展了语言包,可以支持多语言,而且增加语言包也非常简单 4.动态加载所需的JS和CSS文件,JS文件已...
3、EasyUI支持两种渲染方式分别为javascript方式(如:$('#p').panel({...}))和html标记方式(如:class="easyui-panel") 4、支持HTML5(通过data-options属性) 5、开发产品时可节省时间和资源 6、简单,但很强大 7、支持...
增加extjs 文件浏览示例 2016-10-18 菜单编辑界面 2016-10-14 zTree 树形目录; 2016-09-21 增加mvc 拦截器; 2016-09-09 spring-boot增加session保存Redis spring-boot-redis 集群测试 OK. 2016-08-19 支持domain ...
如果你使用GWT中提供的显示组件(比如Button)和组装组件(比如VerticalPanel),GWT编译生成的Ajax应用能够支持大部分的浏览器和操作系统,比如Internet Explorer、Firefox等,也能够支持Linux、Windows等不同操作系统...
-修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion...
-修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion...