收藏

下载资源 加入VIP,免费下载

第1页 / 共93页

第2页 / 共93页

第3页 / 共93页

第4页 / 共93页

第5页 / 共93页

设为主页

添加到收藏夹

切换平台

退出

帮助

2008-04-18

用了ExtJs后，IE打开页面是空白的问题解决

用了ExtJs后，IE打开页面是空白的问题解决:

好不容易搞了个EXTJS的DEMO（自己写的），然后里面就写了个HTML页面，结果浏览器访问时，发现FIREFOX显示正常，而IE却显示空白页面。

这个时候是需要检查一下html的DTD有没有写，如果没有写，加上就可以了。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

2008-04-21

ExtJs关于Ext.extend（）的说明

Ext.extend方法是用来实现类的继承。

extend（Objectsubclass,Objectsuperclass,[Objectoverrides]:

Object

第一个参数：

子类

第二个参数：

父类

第三个参数：

要覆盖的属性。

这里需要强调一下，子类继承下来的是父类中通过superclass.prototype方式定义的属性（包括用此方法定义的函数）。

例子如下：

functionS（）{

}

S.prototype.s="s";

S.prototype.s1="s1";

functionC（）{

this.c="c";

this.c1="c1";

}

Ext.extend（C,S,{s1:

"bycoverload"}）;

varc=newC（）;

alert（c.s）;//s

alert（c.s1）;//bycoverload

如果按下面这个方式写就会提示c.s没有定义（undefind）：

functionS（）{

this.s="s";

this.s1="s1";

}

functionC（）{

this.c="c";

this.c1="c1";

}

Ext.extend（C,S,{s1:

"bycoverload"}）;

varc=newC（）;

alert（c.s）;//undefind

alert（c.s1）;//bycoverload

也可以通过如下方式来实现类的继承

functionS（）{

}

S.prototype.s="s";

S.prototype.s1="s1";

C=Ext.extend（S,{s1:

"bycoverload"}）;

varc=newC（）;

alert（c.s）;//s

alert（c.s1）;//bycoverload

此时，C是子类，S是父类

2008-05-06

extjs视频教程系列之-第一讲:

ExtJS介绍及应用举例

地址:

免费预览地址:

http:

//imgshr.jpg.name/ttthrrwtvhytthhyjjwzzsjzjshszjyyjrry.swf

2008-05-14

透析Extjs的Ext.js源码

（一）对象属性的添加和设置

/**

*分析Ext.js

*/

/**

*第一部分：

对象属性的添加和设置

*/

Person={

sex:

'woman'//初始属性设置

};

Person.applay=function（source,copy,defaults）{

if（defaults）{

Person.applay（source,defaults）

}

if（source&©&&typeofcopy=='object'）{

for（varpincopy）{

//alert（p）;

//p是属性名，通过source[p]=copy[p];对source进行属性的添加和设置。

//如果copy中的属性列表包含有defaults的属性，则source中采用的是copy中的属性和对应的值。

source[p]=copy[p];

}

}

returnsource;

};

/**

*一、传递的是{}配置列表时

*/

//1、不传defaults的情况

Person.applay（Person,{

name:

'wujinli',

age:

26

}）;

//alert（Person.name）;//输出属性名为name的属性值，输出结果：

wujinli，也可以用alert（Person["name"]）

//2、传defaults并且第二个参数的属性列表中不包含第三个参数的属性的情况

Person.applay（Person,{

age:

26

},{

name:

'wujinli'

}）;

//alert（Person.name）;//输出属性名为name的属性值，输出结果：

wujinli，也可以用alert（Person["name"]）

//3、传defaults并且第二个参数的属性列表中有包含第三个参数的属性的情况

Person.applay（Person,{

name:

'丫梨',

age:

26

},{

name:

'wujinli'

}）;

//alert（Person.name）;//输出属性名为name的属性值，输出结果：

丫梨，也可以用alert（Person["name"]）

/**

*二、传递的是对象时

*/

Child=function（）{

this.farther="farther-name";

this.mother="mother-name";

};

Person.applay（Person,newChild（））;

//alert（Person.farther）;//输出属性名为farther的属性值，输出结果：

farther-name

2008-05-14

透析Extjs的Ext.js源码

（二）能在定义时就能执行的方法的写法function（）{...}

/**

*第二部分：

能在定义时就能执行的方法的写法function（）{...}（）;

*/

/**

*一、普通的方法的定义与执行

*/

//1-1、普通的方法定义，不带返回值的情况

fun=function（）{

alert（"执行"）;

};

//1-2、普通的方法执行，不带返回值的情况

//fun（）;//输出结果：

执行

//2-1、普通的方法定义，带返回值，且返回值是个字符串的情况

fun=function（）{

alert（"执行"）;

return"返回的是字符串";

}

//2-2、普通的方法执行，带返回值，且返回值是个字符串的情况

//fun（）;//输出结果：

执行

//2-3、普通的方法执行，带返回值，且返回值是个字符串的情况，并将返回值输出

//alert（fun（））;//输出结果：

执行，返回的是字符串，（分别是两次警告框形式出现），原因是，先执行fun（）,然后会带回返回的字符串，再通过alert输出

//alert（typeoffun（））;//输出结果：

执行，string

//3-1、普通的方法定义，带返回值，且返回值是个object的情况

fun=function（）{

alert（"执行"）;

returnnewDate（）;

}

//3-2、普通的方法执行，带返回值，且返回值是个object的情况

//fun（）;//输出结果：

执行

//3-3、普通的方法执行，带返回值，且返回值是个object的情况，并将返回值输出

//alert（fun（））;//输出结果：

执行，WedMay1416:

25:

32UTC+08002008

//3-4、普通的方法执行，带返回值，且返回值是个object的情况，并将返回值类型输出

//alert（typeoffun（））;//输出结果：

执行，object

//4-1、普通的方法执行，带返回值，且返回值是个function的情况

fun=function（）{

alert（"执行"）;

returnfunction（）{

alert（"返回类型是个方法"）;

};

}

//4-2、普通的方法执行，带返回值，且返回值是个function的情况

//fun（）;//输出结果：

执行

//4-3、因为fun（）执行后返回的是个function，所以根据这个返回的function的参数情况（比如参数的个数和类型）再执行一次返回的function，

//因为此处这个返回的function是不需要参数的，所以就可以直接用（）来执行

//fun（）（）;//输出结果：

执行，返回类型是个方法

//3-4、普通的方法执行，带返回值，且返回值是个object的情况，并将返回值类型输出

//alert（typeoffun（））;//输出结果：

执行，function

/**

*定义时就能执行

*/

fun=function（）{

alert（"执行"）;

}（）;

//alert（fun）;

fun=function（）{

alert（"执行"）;

return"返回的是字符串";//返回的是个字符串

}（）;

//alert（fun）

fun=function（）{

alert（"执行"）;

returnnewDate（）;//返回的是个object

}（）;

alert（fun）;

fun=function（）{

alert（"执行"）;

returnfunction（）{

alert（"返回类型是个方法"）;

}//返回的是个方法

}（）;

fun（）;

2008-05-14

透析Extjs的Ext.js源码（三）扩展

if（!

Person.extend）{//若extend属性还未存在则执行里面的代码

Person.applay（Person,{

extend:

function（）{

alert（"定义时执行"）;

returnfunction（）{

alert（"hello"）;

}

}（）//注意这里加了一对（），表示在new一个Person对象的时候就会立即执行extend后面定义的方法，并且返回里面return的方法给extend属性，

//那么这样，extend就是一个方法类型的属性了

}）;

}

//因为之前!

Person.extend为true，所以进行了Person.applay方法的执行，而参数中extend元素又是个定义时即时执行的属性，因此这里就先输出结果：

定义时执行

Person.extend（）;//输出结果：

hello

Person.extend（）;//输出结果：

hello

//newPerson（）;//输出结果：

定义时执行，没执行一次newPerson（），都会输出一次这个结果

2008-05-14

透析Extjs的Ext.js源码（四）去理解Ext.js

//先定义匿名方法，第一个括号对里的，必须要有这个括号对，之后第二个括号对用来执行这个匿名方法，如果这个匿名方法返回的是function，那么可以加第三个括号对。

（function（）{

alert（"aa"）

returnfunction（）{

alert（"bb"）;

}

}）（）;//输出结果：

aa

//带参数的匿名方法使用

（function（a,b）{

alert（a）;

alert（b）;

returnfunction（c）{

alert（c）;

}

}）（"匿名方法的第一个参数值","匿名方法的第二个参数值"）（"调用匿名方法执行后返回方法所需要的参数值"）;

//输出结果：

匿名方法的第一个参数值，匿名方法的第二个参数值，调用匿名方法执行后返回方法所需要的参数值

2008-05-15

透析Extjs的Ext.js源码（五）分析继承的实现

ext中有关继承的实现的关键代码如下：

（Ext.js中）

extend:

extend:

function（）{

//inlineoverrides

vario=function（o）{

for（varmino）{

this[m]=o[m];

}

};

varoc=Object.prototype.constructor;

returnfunction（sb,sp,overrides）{

if（typeofsp=='object'）{

overrides=sp;

sp=sb;

sb=overrides.constructor!

=oc?

overrides.constructor:

function（）{sp.apply（this,arguments）;};

}

varF=function（）{},sbp,spp=sp.prototype;

F.prototype=spp;

sbp=sb.prototype=newF（）;

sbp.constructor=sb;

sb.superclass=spp;

if（spp.constructor==oc）{

spp.constructor=sp;

}

sb.override=function（o）{

Ext.override（sb,o）;

};

sbp.override=io;

Ext.override（sb,overrides）;

sb.extend=function（o）{Ext.extend（sb,o）;};

returnsb;

};

}（）

override:

override:

function（origclass,overrides）{

if（overrides）{

varp=origclass.prototype;

for（varmethodinoverrides）{

p[method]=overrides[method];

}

}

}

Ext.apply:

Ext.apply=function（o,c,defaults）{

if（defaults）{

//no"this"referenceforfriendlyoutofscopecalls

Ext.apply（o,defaults）;

}

if（o&&c&&typeofc=='object'）{

for（varpinc）{

o[p]=c[p];

}

}

returno;

};

最关键的是extend部分的代码，它使得如果子类没有constructor（或者说子类的constructor就是个默认的Object），那么当new一个子类的时候，会调用他的父类的构造器，因此，我们看到Panel是直接通过Ext.Panel=Ext.extend（Ext.Contailer,{...}）;的方式直接定义的，在newPanel（{...}）的时候就能层层进去一直到有构造器的超类Ext.Component，并执行这个超类的构造器里的代码。

而Ext.Component的构造器代码中有this.initComponet（）方法，这样就能够调用子类的initComponent（）方法，而子类的initComponent（）方法中都有子类名.superclass.initComponent（）;这样的代码来调用父类的init方法，这样我们在new一个子类的后就能够直接初始化了所有的信息。

extend中最关键的一句话是：

sb=overrides.constructor!

=oc?

overrides.constructor:

function（）{sp.apply（this,arguments）;};

它表示了执行父类构造器的原因，

new对象时，就是执行这个function（）{sp.apply（this,arguments）;}方法，

sp.applay（）执行时，父类构造器就会马上被执行。

比较并执行下面的代码就可以理解了上面说的内容了：

1、子类有构造器的情况

Parent=function（）{

alert（"parent"）;

};

Child=function（）{

alert（"child"）;

};

Ext.extend（Child,Parent,{

init:

function（）{

alert（"child'sinitfunction"）;

}

}）;

varcl=newChild（）;//输出结果：

child

cl.init（）;//输出结果：

child'sinitfunction

2、子类没有构造器的情况

Parent=function（）{

alert（"parent"）;

};

Child=Ext.extend（Parent,{

init:

function（）{

alert（"c