extjs入门培训教程

《extjs入门培训教程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Ext培训1.前言Ext是一款优秀的Ajax框架，目前已经出道了3.x版本。可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。这次培训的目的：对Ext有一个大体的了解，并且掌握进一步学习的方法。2.JS基础要学好Ext必须对JS有一定的了解。2.1闭包所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是

2、该表达式的一部分。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码：functiona(){vari=0;functionb(){alert(++i);}returnb;}varc=a();c();这段代码有两个特点：1）函数b嵌套在函数a内部；2）函数a返回函数b。这样在执行完varc=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就

3、是说：当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。闭包的应用场景：1)保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。1)在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。以上两点是闭包最基本的应用场景，很多经典案例都源于此。Ext中也存在许多这样的情况。2.2对象简单的声明一个对象varPerson={name:"刘德华","年龄":50,address:"中国"};varpersonObj

4、=newObject();personObj.firstname="John";personObj.lastname="Doe";personObj.age=50;personObj.eyecolor="blue";构造对象的方式有以下几种:①　构造方式functionUser(){this.username="zhangsan";//this.不能丢this.say=function(){//this.不能丢alert("username:"+this.username);//this.不能丢}//下面注释的这种写法不对//functionsay

5、(){//alert("username:"+this.username);//}}varuser=newUser();user.username="lisi";user.say();//username:lisivaruser1=newUser();user1.say();//username:zhangsan,不受user对象的影响//多个实例对象不共享类的属性值，如下:functionUser(){this.username=newArray();//this.不能丢this.say=function(){//this.不能丢alert("u

6、sername:"+this.username);//this.不能丢}}varuser=newUser();user.username.push("zhangsan");user.say();//username:zhangsanvaruser1=newUser();user1.say();//user1的username为空，不为zhangsan,因为user1的属性值不受user影响优点:多个实例对象不共享类的属性值，缺点:每个实例对象都会产生出一个函数say。不共享函数就会让每个对象都有自己的函数副本,这样就消耗了较多的资源，所以就出现下面

7、这种工厂方式的对象创建方式。①　以工厂方式创建functionshowColor(){alert(this.color);}functioncreateCar(sColor,iDoors,iMpg){varoTempCar=newObject;oTempCar.color=sColor;oTempCar.doors=iDoors;oTempCar.mpg=iMpg;oTempCar.showColor=showColor;returnoTempCar;}varoCar1=createCar("red",4,23);varoCar2=createCa

8、r("blue",3,25);oCar1.showColor();//"red"oCar2.showColor();//"