ExtJs4基础概念总结

浏览数：31 / 时间：2015年06月09日

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'
       }
]

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

ExtJs4基础概念总结