标签：建议 vbox 原型继承 har stop 方法 hello hid 封装
类（Class）
preparation！
我用的是ext-4.2，解压后会得到以下文件
学习要用到的文件很少，现在保留以下文件和整个文件夹，然后删除其它文件并保持目录结构。本页面底部有提供基础包的下载。
在aspx页面中引入必要的Extjs文件，ext-all-dev可以不引人，但它作为调试使用，so建议保留。
测试一下程序是否能跑起来。
<script type="text/javascript">
Ext.onReady(function () {
Ext.MessageBox.alert("title","hello");
});
</script>
类
自定义类型
ExtJs允许你基于它提供的方法创建自定义的类型，创建自定义类型使用Ext的define方法。 所有使用define方法注册的类，其实例的属性、方法都是从原型上获得而非从构造函数获得。构造器只用于初始化配置信息，将属性、方法绑定到实例上。
Ext.define(x,y)
x是自定义类，y是匿名对象用于设置类成员。
<script type="text/javascript">
//参数1是命名空间.类名
//参数2是类的成员，成员全部放在匿名对象中，
//匿名对象一般设置两个属性，
//一个属性是config，表示配置信息，它用于存储对象的属性和方法
//一个属性是constructor，表示类的构造函数
//要使config的属性、方法成为类实例的属性、方法就需要使用initConfig初始化它们
Ext.onReady(function () {
Ext.define("Yin.Person", {
config: {
name: "默认",
age: 20,
say: function () { Ext.MessageBox.alert("",this.name+this.age); },
},
constructor: function (config) {
this.initConfig(config);
}
});
//new对象时会调用constructor构造器初始化config配置信息
var person = new Yin.Person({
name: "寒食",
age:32
});
person.say();//寒食32
alert(Yin.Person.prototype.hasOwnProperty("say"));//true say方法属于Person类的原型对象的方法
alert(Yin.Person.prototype.hasOwnProperty("name"));//true name属性属于Person类的原型对象的属性
alert(Yin.Person.prototype.hasOwnProperty("age"));//true age属性属于Person类的原型对象的属性
});
</script>
initConfig从哪里来的？解析器会在该对象上去查找initConfig方法，如果找不到就会去原型链上查找，所以initConfig可以确定是来自类的原型对象，通过调用原型的initConfig方法，该方法内部会将config进行遍历，接着逐一取出每个属性，然后赋给原型对象自己。所以类的实例对象正是通过原型继承的原理得到了这些成员。另外，如果我们在new对象时，没有设置config，那么在构造器中，this.initConfig(config);又是如何初始化name、age和say的呢？原因很简单，config属性和constructor属性处于同一个块（作用域）里，所以，如果你实例化Person类时没有显示指定config，那么构造器中的config就来自与它处于同一作用域的config属性。
get和set访问器
使用Ext的define方法创建的类会获得Ext原型对象上定义的get、set访问器，专用于获取（get）和设置（set）对象的属性或方法，注意一旦通过set访问器修改了属性或方法的代码逻辑，那么被修改过的属性或方法就会自动变成当前对象的原生成员（这是经本人测试后的理解，不保证正确）。
person.getName();//返回寒食
person.getAge();//返回32
person.getSay();//返回say方法
person.setName("sam");//修改值
person.setAge(50);//修改值
person.setSay(function () {//修改方法
Ext.MessageBox.alert("", "我叫："+this.name +"年龄："+ this.age);
});
类继承
extend:z
z是父类
类继承同样可以使用Ext的define方法来完成，只需要在参数二（匿名函数）中指示extend属性，它表示当前类将从extend指向的类处派生。 我们假设X要从Y派生，X的extend就应该指向Y，X如何获得Y的成员？Y.prototype会将自身的成员copy给X.prototype，就这么简单。
<script type="text/javascript">
Ext.onReady(function () {
//创建Person类
Ext.define("Yin.Person", {
config: {
name: "默认",
age: 20,
say: function () { Ext.MessageBox.alert("",this.name+this.age); },
},
constructor: function (config) {
this.initConfig(config);
}
});
//创建Man类
Ext.define("Yin.Man", {
extend: "Yin.Person",//指示派生自Yin.Person类
contructor: function () {
this.initConfig();
}
});
var man = new Yin.Man();
man.say();//继承了Person的say方法
});
</script>
对象继承
对象继承使用Ext.apply方法，与类继承类似，X对象要从Y对象继承实际上是直接将Y对象的成员完全copy给X，如果X已经有与Y同名的成员，则会发生新覆盖旧。如果不想覆盖，可使用Ext.applyIf。
var obj = { gender: "男" };
var obj2 = { name: "sam" }
Ext.apply(obj2, obj);
alert(obj2.gender);
类多重继承
mixins:[x1,x2]
x是类名
Ext为了解决类只能派生自一个类，而不能从多个类派生的问题，使用了混入mixins，实际上就是将多个类的prototype的成员copy给需要多重继承的类。
Ext.onReady(function () {
Ext.define("Yin.Person", {
config:{name:"寒食"},
constructor: function (config) { this.initConfig(config);}
});
Ext.define("Yin.Employee", {
config: { job: "设计" },
constructor: function (config) { this.initConfig(config);}
});
Ext.define("Yin.Husband", {
config: { age: "32" },
constructor: function (config) { this.initConfig(config); }
});
Ext.define("Yin.Man", {
extend: Yin.Person,
mixins: ["Yin.Employee", "Yin.Husband"]
});
var man = new Yin.Man();
var name=man.name;//寒食
var age=man.age;//32
});
静态成员
statics:{ }
如果要为类定义静态成员可使用statics。
Ext.define("Yin.Person", {
statics:{
ancestor:"monkey"
},
config:{name:"寒食"},
constructor: function (config) { this.initConfig(config);}
});
Yin.Person.ancestor//monkey
ExtJs组件类
学习ExtJs主要就是学习配置、组合各种组件，所以对于利用面向对象的思维去创建自定义类这种形式肯定显得不太有那个必要。
Ext.Component类
ExtJs中的所有可视化组件全都派生自Ext.Component，该类有一些最基本的属性用于控制呈现在html上的组件的样式，比如我们要渲染一个灰色的盒子到html页面，可如下设置：
<div id="divBox"></div>
<script type="text/javascript">
Ext.onReady(function () {
var box = new Ext.Component({
el: "divBox",
style: "background-color:#1E1E1E;margin:200px auto;",
width:100,
height:40
});
box.render();
});
</script>
Ext.Container类
派生自Ext.Component类，它提供两个及其重要的参数：layout和items。
Container的属性
layout : border |
指示组件如何在html上布局。
items : [ obj , obj ]
指示当前组件的所有子组件，子组件以{ }的形式出现。
items的属性
xtype : 组件的字符表示
指示子组件是哪种类型，取值是首字母小写的组件名字。以前你可能指示items时会直接new出子组件，现在只需要指示xtype即可，比如要在当前组件中创建一个Panel组件：
//以前的写法
items: [
new Ext.Panel({title:"主题",region:‘north‘}),
new Ext.Panel({ title: "菜单", region: ‘west‘,width:100} )
]
//如今的写法
items: [
{ xtype: ‘panel‘, region: ‘north‘ ,title:"主题" },
{ xtype: ‘panel‘, region: ‘west‘, title:"菜单",width: 100 }
]
Ext.Util.observable类
只有继承了Ext.Util.observable的组件会拥有事件，作为程序员几乎只需要处理鼠标键盘表单文档加载等事件，所以此处略过。
Ext.EventObjectImpl类
Javascript的Event事件对象被ExtJs封装为Ext.EventObjectImpl，该类整合了自定义事件、浏览器事件和Dom文档事件，所以拥有事件的组件、ExtJs对象、Dom对象都会继承EventObjectImpl，我们可以在事件发生时通过组件继承EventObjectImpl所得到的属性和方法去执行一系列的操作。
Ext.EventObjectImpl的方法
getX( ) | getY( ) | getXY( )
获取事件发生时，触发事件的对象在文档中的x、y坐标。最后一个方法返回数组，getXY( )[0]得到x坐标，getXY( )[1]得到y坐标。
getTarget( )
获取触发事件的源对象。
preventDefault( bool )
是否阻止浏览器默认动作。
stopPropagation( bool )
是否阻止事件冒泡。似乎Jquery和ExtJs都不支持事件围捕。
stopEvent( )
立即停止事件。该方法内部自动调用preventDefault()和stopPropagation()两个函数,取消浏览器的默认操作,同时停止事件冒泡。
purgeElement( )
清除该对象上锁绑定的所有事件。
on | un
绑定事件监听（侦听）器、取消事件监听（侦听）器。
<input id="test" type="text" /> <script type="text/javascript"> Ext.onReady(function () { //e就是触发事件的对象，此处e表示键盘，e是Ext.EventObjectImpl的实例 Ext.get("test").on("keypress", function (e) { if (e.charCode == e.SPACE) { Ext.MessageBox.alert("","你按下了空格键位"); } }); }); </script>
标签：建议 vbox 原型继承 har stop 方法 hello hid 封装
原文地址：http://www.cnblogs.com/myrocknroll/p/7092387.html
