Ext.js入门（二）

ExtJs OOP基础一：ExtJs中的面向对象1、ExtJs中命名空间的定义
Ext中的命名空间类似于C#中的namespace和java中的包,用来对工程中的类进行更好的管理，命名空间的层次结构用.来划分。
Ext通过namespace()方法来创建命名空间.
语法：Ext.namespace(“命名空间”);
示例：Ext.namespace(“MyOffice.System”);
eg：// 定义一个命名空间　 Ext.namespace("Ext.OA");　// 在命名空间上定义一个类　 Ext.OA.helloworld = Ext.emptyFn;　// 创建一个类的实例　 new Ext.OA.helloworld();2.Ext中的做法
<script type="text/javascript">　　　　　　　 // 定义一个命名空间　 Ext.namespace("Ext.OA");　　　　　　　// 在命名空间上定义一个类　 Ext.OA.helloworld = Ext.emptyFn;　　　　　　　 // 创建一个类的实例　　 new Ext.OA.helloworld();　　 　　　 </script>
其中
　　　 Ext.OA.helloworld = Ext.emptyFn;
　　等价于　
　　　 Ext.OA.helloworld = function(){};3.支持类实例属性<script type=“text/javascript”>　　　 　　　 Ext.namespace(“Ext.OA”); // 自定义一个命名空间　　　　　 　 Ext.OA.Person = Ext.emptyFn; // 在命名空间上自定义一个类 　　　　 　　　 // 为自定义的类 增加一个 name 属性，并赋值　　　　　　 Ext.apply(Ext.OA.Person.prototype, { 　　　　　　　　　　 name : “李四"　　　　　　　 });　 　　　　　var _person = new Ext.OA.Person();// 实例化 自定义类　　　　　　　 alert(_person.name); 　　 _person.name = "张三";// 修改类name属性　 　　　　　 alert(_person.name);　　　 </script>3：支持类实例方法<script type=“text/javascript”>　　　　　　　 Ext.namespace(“Ext.OA”); // 自定义一个命名空间　　　　　　　 Ext.OA.Person = Ext.emptyFn; // 在命名空间上自定义一个类　　　　　　　 //
演示类实例方法　　　　　　　 Ext.apply(Ext.OA.Person.prototype, {　　　　　　　　　　　 name : “李四",　　　　　　　　　　　 sex :
"男",　　　　　　　　　　　 print :
function() {　　　　　　　　　　　　　　　 alert(String.format("姓名:{0},性别:{1}",
this.name, this.sex));　　　　　　　　　　　 }　　　　　　　 });　　　　　　　 var _person
= new Ext.OA.Person();// 实例化 自定义类　　　　　　　 _person.print();　　　 </script>4：支持类静态方法}<script type=“text/javascript”>　　　　　　　 Ext.namespace(“Ext.OA”); // 自定义一个命名空间　　　　　　　 Ext.OA.Person = Ext.emptyFn; // 在命名空间上自定义一个类　　　　　　　 //
演示类实例方法　　　　　　　 Ext.apply(Ext.OA.Person.prototype, {　　　　　　　　　　　 name : “李四",　　　　　　　　　　　 sex :
"男",　　　　　　　　　　　 print :
function() {　　　　　　　　　　　　　　　 alert(String.format("姓名:{0},性别:{1}",
this.name, this.sex));　　　　　　　　　　　 }　　　　　　　 });　　　　　　　 // 演示 类静态方法　　　　　　　 Ext.OA.Person.print =
function(_name, _sex) {　　　　　　　　　　　 var _person
= new Ext.OA.Person();　　　　　　　　　　　 _person.name =
_name;　　　　　　　　　　　 _person.sex
= _sex;　　　　　　　　　　　 _person.print(); // 此处调用类 实例方法，上面print是类 静态方法　　　　　　　 };　　　　　　　 Ext.OA.Person.print("张三", "女"); // 调用类 静态方法　　　 </script>5：支持构造方法　}<script type="text/javascript">　　　　　　　 Ext.namespace("Ext.OA");
//自定义一个命名空间　　　 //构造方法　　　　　　　 Ext.OA.Person =
function(_cfg){　　　　　　　　　　　 Ext.apply(this,_cfg);　　　　　　　 };　　　 //演示类实例方法　　　　　　　 Ext.apply(Ext.OA.Person.prototype, {　　　　　　　　　　　 print:function(){　　　　　　　　　　　　　　　 alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));　　　　　　　　　　　 }　　　　　　　 });　　　　　　 //演示 类静态方法　　　　　　　 Ext.OA.Person.print =
function(_name,_sex){　　　　　　　　　　　 var _person
= new Ext.OA.Person({name:_name,sex:_sex});　　　　　　　　　　　 _person.print(); //此处调用类 实例方法，上面print是类 静态方法　　　　　　　 };　　　 Ext.OA.Person.print("张三","女"); //调用类 静态方法　　　 </script>

6：支持类继承　Ext.namespace("Ext.OA"); // 自定义一个命名空间//
*******************父类*********************　　　　　　　 //
构造方法　　　　　　　 Ext.OA.Person =
function(_cfg) {　　　　　　　　　　　 Ext.apply(this, _cfg);　　　　　　　 };　　　　　　　 // 演示类实例方法　　　　　　　 Ext.apply(Ext.OA.Person.prototype, {　　　　　　　　　　　 job :
"无",　　　　　　　　　　　 print :
function() {　　　　　　　　　　　　　　　 alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,　　　　　　　　　　　　　　　　　　　 this.sex,
this.job));　　　　　　　　　　　 }　　　　　　　 });}Ext.OA.Student = function(_cfg) {　　　　　　　　　　　 Ext.apply(this, _cfg);　　　　　　　 };　　　　　　　 Ext.extend(Ext.OA.Student, Ext.OA.Person, {　　　　　　　　　　　 job :
"学生"　　　　　　　 });　　　　　　　 var _student
= new Ext.OA.Student({　　　　　　　　　　　 name :
"张三",　　　　　　　　　　　 sex :
"女"　　　　　　　 });　　　　　　　 _student.print(); // 调用 父类方法7：支持命名空间别名

 Ext.namespace("Ext.OA"); // 自定义一个命名空间　　　　　　　 Wt
= Ext.OA; // 命名空间的别名//
*******************父类*********************　　　　　　　 //
构造方法　　　　　　　 Wt.Person =
function(_cfg) {　　　　　　　　　　　 Ext.apply(this, _cfg);　　　　　　　 };　　　　　　　 // 演示类实例方法　　　　　　　 Ext.apply(Wt.Person.prototype, {　　　　　　　　　　　 job :
"无",　　　　　　　　　　　 print :
function() {　　　　　　　　　　　　　　　 alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,　　　　　　　　　　　　　　　　　　　　 this.sex,
this.job));　　　　　　　　　　　 }
　　　　　　　 });
// *******************子类1*********************　　　　　　　 Wt.Student =
function(_cfg) {　　　　　　　　　　　 Ext.apply(this, _cfg);　　　　　　　 };　　　　　　　 // 重写父类的 实例 方法　　　　　　　 Ext.extend(Wt.Student, Ext.OA.Person, {　　　　　　　　　　　 job :
"学生",　　　　　　　　　　　 print :
function() {　　　　　　　　　　　 alert(String.format("{0}是一位{1}{2}", this.name,
this.sex,　　　　　　　　　　　　　　　　　　　　 this.job));　　　　　　　　　　　 }　　　　　　　 });　　　　　　　 var _student
= new Wt.Student({　　　　　　　　　　　 name :
"张q三",　　　　　　　　　　　 sex :
"女"　　　　　　　 });　　　　　　　 _student.print(); // 调用 父类方法

8：支持类别名

Ext.namespace("Ext.OA"); // 自定义一个命名空间　　　　　　　 Wt
= Ext.OA; // 命名空间的别名//
*******************父类*********************　　　　　　　 //
构造方法　　　　　　　 Wt.Person =
function(_cfg) {　　　　　　　　　　　　 Ext.apply(this, _cfg);　　　　　　　 };　　　　　　　 PN
= Wt.Person; // 类别名　　　　　　　 //
演示类实例方法　　　　　　　 Ext.apply(PN.prototype, {　　　　　　　　　　　 job :
"无",　　　　　　　　　　　 print :
function() {　　　　　　　　　　　 alert(String.format("姓名:{0},性别:{1},角色:{2}", this.name,　　　　　　　　　　　　　　　　　　　 this.sex,
this.job));　　　　　　　　　　　 }　　　　　　　 });
// *******************子类1*********************　　　　　　　 Wt.Student =
function(_cfg) {　　　　　　　　　　　 Ext.apply(this, _cfg);　　　　　　　 };　　　　　　　 ST = Wt.Student;　　　　　　　 // 重写父类的 实例 方法　　　　　　　 Ext.extend(ST, PN,
{　　　　　　　　　　　 job :
"学生",　　　　　　　　　　　 print :
function() {　　　　　　　　　　　　　　　 alert(String.format("{0}是一位{1}{2}", this.name,
this.sex,　　　　　　　　　　　　　　　　　　　　 this.job));　　　　　　　　　　　 }　　　　　　　 });　　　　　　　 var _student
= new ST({　　　　　　　　　　　 name :
"张q三",　　　　　　　　　　　 sex :
"女"　　　　　　　 });　　　　　　　 _student.print(); // 调用 父类方法

二：Extjs中的配置选项在ExtJs中，初使化对象时，会大量使用config配置参数(config通常均为一个json对象

Student = function(name,age){
this.name = name;
this.age= age;
}
//测试
Ext.onReady(function(){

var student = new Student("李四"，18);

var info=string.format("姓名：{0}，性别：{1}"，student.name,student.age)

alert(info);
})；如json作为参数传递，则改造如下：
Student = function(config){
this.name = config.name;
this.sex = config.sex;
}
//测试
var student = new Student({name:”fwy”,sex:”男”});
alert(“姓名:”+student.name+”,性别:”+student.sex);

Extjs中一种更好的做法：

Student = function(config){
Ext.apply(this,config);
}
//测试
var student = new Student({name:”fwy”,sex:”男”});
alert(“姓名:”+student.name+”,性别:”+student.sex);

Ext.apply(obj,config)与Ext.applyIf(obj,config)的区别
说明：apply会将config和obj参数的同名属性覆盖,并且将config的其他属性添加到obj中.而applyIf则不会覆盖。三：Ext中自定义事件Ext的各种事件登记方式
1、使用addListener/on方法登记
这是最常见的方法登记方式，可以在元素获取后或组件实例化后登记，也可以在类构造器中登记。
//第一种方式形如：
{ //如msgBox中
…
fn:function(){…},
scope:…
}//第二种方式2、多事件组合方式登记
//常见于面板为基类(panel)的组件事件注册
{
…
listners:{
‘collapse’:function(obj){
…
},
‘expand’:function(obj){
…
}
}
}常用于工具栏按钮的事件注册
{
handler:function(){…},
scope:…
}//如果在一个元素上添加多个事件处理器可以向以下这样一次性设定
e1.on(
{
‘click’:{fn:this.onClick,scop:this},
‘mouseover’:{fn:this.onMouseOver,scope:this},
‘mouseout’:{fn:this.onMouseOut,scope:this}
}
)也可以用以下语法
e1.on{
‘click’:this.onClick,
‘mouseover’,this.onMouseOver,
‘mouseout’,this.onMouseOut,
scope:this
}3、使用Ext.addBehaviors方法登记事件
如下所示
Ext.addBehaviors({
//为id为test的锚点元素添加click事件
‘#test a@click’:function(e,t){...},
//为多个元素增加click事件
‘#test1 a,div.someclass@click’:function(){…}
})