Ext.application
代表一个ExtJs富客户端的应用程序的入口点。从Ext4.0开始提出一个新的概念:Ext MVC application Architecture。
这个概念用于帮助开发者以最快的速度组织起一个高效、稳定的的Ext前端。定义Ext.application的文件脚本一般起名为
app.js。将这个文件加载到index.html中。app.js文件的作用如下:
- 指定Ext Framework类加载路劲
- 定义全局命名空间
- 定义自动创建视图属性
- 罗列控制器
app.js在html文件中解释时,首先加载出app/view/目录下的Viewport.js,由这个文件来加载引用的其他视图,在罗列控制器的时候,要指定清楚controller文件夹下的脚本文件路劲,如somnus.UserController。示例代码如下
<span style="font-family:Courier New;font-size:14px;">// extjs程序入口 extRoot = app.basePath+"/jslib/ext-4.2.1"; // 配置动态加载路径 Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': extRoot + '/ux', 'somnus':app.basePath+'/app' } }); Ext.onReady(function () { Ext.application({ name: 'somnus',//定义一个全局命名空间 somnus appFolder: 'app', autoCreateViewport: true, controllers: [], launch: function() {} }); });</span>
Ext.define()
内置3个参数,包括类名称(className)、对象数据逻辑和方法和回调函数。
Ext.define()和Ext.extend()方法都用于自定义类,但是从4.0以后开始不再推荐使用extend()。
完整样式:Ext.define(String className,Object data,[Function fn])
这里第二个参数是一个对象,该对象用于为新创建的类指定属性,该对象可以指定任何合法属性。
比如:
- self:引用当前类本身
- alias:定义类别名
- config:用于该类指定配置选项,Extjs会自动为config指定的选项添加setter方法和getter方法
- extend:用于指定该类继承的父类
- staticsL用于为该类定义静态方法和属性
- mixins:用于列出所有要被混入的类
- override:定义要覆盖的类
- requires:用于列出实例化之前必须预先加载的类
- singleton:如果该属性为true,则这个类是单例的
- uses:用于列出必须与该类同时使用的类
Ext的组合属性-Mixins
组合是extjs4的新特性,可用于实现多继承。该属性会以同步方式加载类文件,并实例化该类
基本用法:
Ext.define('MyClass.A',{ showA:function(){ console.log('A'); } }); Ext.define('MyClass.B',{ showB:function(){ console.log('B'); } }); Ext.define('MyClass.C',{ mixins:['MyClass.A','MyClass.B'] showC:function(){ console.log('C'); } }); var c = Ext.create('MyClass.C'); c.showA(); c.showB(); c.showC();
Ext.create()
用来创建对象。语法格式为: var aa =Ext.create(String name,Object args);
参数1指定要创建对象的类名;参数2是一个对象,用于向新生成的对象传入构造参数值(也称为配置选项,
可以为config属性指定选项传入参数值)。参考代码如下:
<span style="font-family:Courier New;font-size:14px;">Ext.define('somnus.User',{ remark:'', config:{ username:'aa', password:'123456' }, constructor:function(cfg){ this.initConfig(cfg) } }); var user = Ext.create('somnus.User',{ username:'bb', password:'123456' remark:'xxxx' }); console.log(user.remark); console.log(user.getUsername()); console.log(user.getPassword());</span>
Ext.Class.alias
alias 属性是作为这个类的别名来使用的。就是说它是这个类的第二个名称。它的作用是当你定义的这个类
使用非常频繁,而且类名较长时替代这种创建对象的方式来使用
var a = Ext.cteate(‘AM.view.user.List‘);
利用alias创建对象的方式是这样的:Ext.widget(‘userlist‘);
Ext.define('MyApp.CoolPanel',{ extend:'Ext.panel.Panel', alias:['widget.coolpanel'], title:'Yeah' }); Ext.create('widget.coolpanel'); Ext.widget('coolpanel');
Ext.AbstractCompent-->xtype
相对于用类全名的方式创建对象,这个属性提供了一个简短的对象创建方式。使用xtype定义
component组件实例在Ext界面程序设计中非常广泛,最典型的的就是当你定义一个container容器。
例如创建form文本域(text fields)的两种方式对比如下:
items:[ Ext.create('Ext.form.filed.Text',{ filedLabel:'foo1' }), Ext.create('Ext.form.filed.Text',{ filedLabel:'foo2' }), Ext.create('Ext.form.filed.Text',{ filedLabel:'foo3' }) ] //上面的创建方式改为xtype items:[ { xtype:'textfield', filedLabel:'foo1' },{ xtype:'textfield', filedLabel:'foo2' },{ xtype:'textfield', filedLabel:'foo3' } ]