首页 > 代码库 > ExtJs4基础概念总结
ExtJs4基础概念总结
Ext.application
代表一个ExtJs富客户端的应用程序的入口点。从Ext4.0开始提出一个新的概念：Ext MVC application Architecture。这个概念用于帮助开发者以最快的速度组织起一个高效、稳定的的Ext前端。定义Ext.application的文件脚本一般起名为
app.js。将这个文件加载到index.html中。app.js文件的作用如下：
- 指定Ext Framework类加载路劲
- 定义全局命名空间
- 定义自动创建视图属性
- 罗列控制器
<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基础概念总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。