ExtJs4基础概念总结

页面导航:首页 > 网络编程 > JavaScript > ExtJs4基础概念总结

ExtJs4基础概念总结

来源: 作者: 时间:2016-02-04 09:15 【

Ext application代表一个ExtJs富客户端的应用程序的入口点。从Ext4 0开始提出一个新的概念:Ext MVC application Architecture。这个概念用于帮助开发者以最快的速度组织起一个高效、稳定的的Ext前

Ext.application

代表一个ExtJs富客户端的应用程序的入口点。从Ext4.0开始提出一个新的概念:Ext MVC application Architecture。
这个概念用于帮助开发者以最快的速度组织起一个高效、稳定的的Ext前端。定义Ext.application的文件脚本一般起名为
app.js。将这个文件加载到index.中。app.js文件的作用如下:
指定Ext Framework类加载路劲定义全局命名空间定义自动创建视图属性罗列控制器 app.js在html文件中解释时,首先加载出app/view/目录下的Viewport.js,由这个文件来加载引用的其他视图,在罗列控制器的时候,要指定清楚controller文件夹下的脚本文件路劲,如somnus.UserController。示例代码如下

// 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() {}
	});
});

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属性指定选项传入参数值)。参考代码如下:

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());

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


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<