ExtJs4基础概念总结

标签：extjs4   application   config   mixins   

Ext.application

1. 指定Ext Framework类加载路劲
2. 定义全局命名空间
3. 定义自动创建视图属性
4. 罗列控制器

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

1. self：引用当前类本身
2. alias：定义类别名
3. config：用于该类指定配置选项，Extjs会自动为config指定的选项添加setter方法和getter方法
4. extend：用于指定该类继承的父类
5. staticsL用于为该类定义静态方法和属性
6. mixins：用于列出所有要被混入的类
7. override：定义要覆盖的类
8. requires：用于列出实例化之前必须预先加载的类
9. singleton：如果该属性为true，则这个类是单例的
10. uses：用于列出必须与该类同时使用的类

Ext的组合属性-Mixins

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

<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

Ext.define('MyApp.CoolPanel',{
	extend:'Ext.panel.Panel',
	alias:['widget.coolpanel'],
	title:'Yeah'
});
Ext.create('widget.coolpanel');
Ext.widget('coolpanel');

Ext.AbstractCompent-->xtype

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基础概念总结

标签：extjs4   application   config   mixins   

原文地址：http://blog.csdn.net/lovesomnus/article/details/42420045