Ext2.docx

newExt.Panel（{

renderTo:

'test',

width:

'200px',

title:

'MyTitle',

html:

'MyHTMLcontent',

collapsible:

true

}）;

敲击Ctrl-Enter。

怎么样，一个可以伸缩的面板就配置好了。

（注意面板右上角的小图标）

每次敲击Ctrl-Enter，第一行代码都会移除现有的内容，这样您就可以有一个干净的调试环境。

这是一个简单的小技巧，十分方便您尝试各种配置选项。

您可以为update（）函数添加所需要的HTML代码，无论多少。

然后编写或多或少的Javascript来探索ExtAPI。

Tutorial:

Javascript中的作用域（scope）是什么?

（一）

定义

作用域scope

1.（名词）某样事物执行、操作、拥有控制权的那么一个区域[1]

2.（名词）编写程序时，程序之中变量的可见度；例如，一个函数能否使用另外一个函数所创建的变量。

[2]

可是这能够说明什么问题呢？

每当有人在说“这是作用域的问题”或“作用域搞错了”的时候，那就是说某个函数运行起来的时候，找不到正确变量的位置。

这样我们便知道应该从哪一方面入手，查找出问题所在。

正式开始

实际上每一个你定义的函数都是某个对象的方法。

甚至是这样的写法：

functionfn（）{

alert（11）;

}

老兄你不是故弄玄虚吧～。

做一个这样的演示可真得是简单得要命。

没错！

本例不需要任何Javascript文件，服务器或html。

你只要打开firefox，弹出firebug,点击consoletab。

在Firefox状态栏上面看到有>>>提示的地方就可以输入了。

输入：

functionfn（）{alert（11）;};

然后回车。

一切安然...你刚才做的实际上是定义了一个函数fn。

接着试试：

fn（）;

然后回车。

得到11的警告窗口？

还不错吧？

接着试试：

window.fn（）;

this.fn（）;

得到一样的结果吧？

这是因为函数fn是window对象的一个方法，在第二行的"this"的作用域实际指向了window对象。

不过多数情况中你不需要像这样window.myFunction（...）地调用函数，这样太麻烦了，程序员工作起来会很不方便。

window对象

window对象总是存在的，你可理解其为一个浏览器窗口对象。

它包含了其它所有的对象如document和所有的全局变量。

你可以打开Firebug，切换到Script页面并在Firebug右侧的Newwatchexpression...里面输入window。

观察window对象究竟有什么在里面。

接着，尝试找出我们之前定义过的fn函数。

另外，每个frame或iframe拥有其自身的window对象，其自身的全局空间。

理解作用域

接下的内容开始有点复杂了。

切换到FirebugConsole标签页然后输入：

varo1={testvar:

22,fun:

function（）{alert（'o1:

'+this.testvar）;}};

varo2={testvar:

33,fun:

function（）{alert（'o2:

'+this.testvar）;}};

结果是什么？

你声明了o1和o2两个对象，分别都有一些属性和方法，但值不同。

接着试试：

fun（）;

window.fun（）;

this.fun（）;

出错了，是吧？

因为window对象（等价于this）并没有fun的方法。

试一试下面的：

o1.fun（）;

o2.fun（）;

22和33出来了？

非常好！

接下来这部分的内容最复杂啦。

基于这个原始的函数，如果对象的数量多的话，你必须为每个对象加上这个函数－明显是重复劳动了。

这样说吧，o1.fun写得非常清晰的而且为了搞掂它已经占用了我一个星期的开发时间。

想象一下代码到处散布着this变量，怎么能不头疼？

如果要将调用（执行）的o1.fun方法但this会执行o2,应该怎么实现呢？

试一试下面的：

o1.fun.call（o2）;

明白了吗？

当执行o1的fun方法时你强行将变量this指向到o2这个对象，换句话说，更加严谨地说:

o1.fun的方法在对象o2的作用域下运行。

当运行一个函数，一个对象的方法时，你可将作用域当作this值的变量。

变量的可见度

变量的可见度和作用域的关系非常密切。

我们已经了解到，可在任何对象的外部，声明变量，或在全局的函数（函数也是变量的一种）也可以，更严格说，它们是全局对象window的属性。

全局变量在任何地方都可见；无论函数的内部还是外部。

如果你在某一个函数内修改了一个全局变量，其它函数也会得知这个值是修改过的。

对象可以有它自己的属性（像上面的testvar）,这些属性允许从内部或是外部均是可见的。

试：

alert（o1.testvar）;//从外部访问o1的属性testvar

从内部访问的演示可在两个测试对象的fun方法找到。

用关键字var在内部声明，相当于声明局部变量（局部声明也是在一条链上，即ScopeChain作用域链上,Frank注）：

i=44;

functionfn2（）{

vari=55;

alert（i）;

}

fn2（）;

将得到什么？

对了，55。

声明在函数fn2的变量i是一个本地变量（局部变量），和等于44的全局变量i44没什么关系。

But:

alert（i）;

这会访问全局变量i，显示44。

希望本文能帮助读者彻底理解作用域变量可见性的含义。

嵌套的函数（作用域链）

当你进行函数的嵌套时，要注意实际上作用域链是发生变化的，这点可能看起来不太直观。

你可把下面的代码置入firebug监视值的变化。

vartestvar='window属性';

varo1={testvar:

'1',fun:

function（）{alert（'o1:

'+this.testvar+'<<'）;}};

varo2={testvar:

'2',fun:

function（）{alert（'o2:

'+this.testvar）;}};

o1.fun（）;'1'

o2.fun（）;'2'

o1.fun.call（o2）;'2'

这是本文的首个例子。

vartestvar='window属性';

varo3={

testvar:

'3',

testvar2:

'3**',

fun:

function（）{

alert（'o3:

'+this.testvar）;//'obj3'

varinner=function（）{

alert（'o3-inner:

'+this.testvar）;//'window属性'

alert（'o3-inner:

'+this.testvar2）;//undefined（未定义）

};

inner（）;

}

};

o3.fun（）;

这里我们换了别的函数，这个函数与原先的函数几乎相似但区别是内部函数的写法。

要注意的是内部函数运行时所在的作用域，和外部函数的作用域是不一样的。

Ext可让你调用函数时指定函数的作用域，避免作用域的问题。

变量的声明

初始化变量时一定要加上“var”关键字，没有的话这就是一个全局变量。

譬如，在下面的例子中，会有一个变量写在函数内部，然而你打算仅仅是声明局部的变量，但实际也可能出现覆盖全局变量的值的情形。

在FIREBUG"DOM"的标签页中，你可通过检测“window”看到所有的全局变量。

如果你发现有“k”或“x”变量那证明你把这个变量分配在一个不合适的作用域里面。

见下例：

vari=4;

varj=5;

vark=7;

varfn=function（）{

vari=6;

k=8;//注意前面没有var所以这句话的意思的把8赋予到变量k中去！

alert（i）;//6

alert（j）;//5

alert（k+'-1'）;//8-1

x=1;//这句的作用有两种情况，创建全部变量x或覆盖（overwrite）全部变量x

};

fn（）;

alert（k+'-2'）;//8-2（注意不是7-2）

与前面例子变化不大，另外注意的是函数内的k前面是没有var关键字的，所以这里不是声明局部变量，而是将某个值再次分配到k这个全局变量中。

另外要注意的是，alert方法执行期间，参数i是当前能找到的局部变量，它的值是6，但参数j在当前作用域找不到，就沿着作用域链（scopechain）向上查找，一直找到全局变量的那个j为止。

在Ext中指定作用域

前面已提及，当调用函数时Ext能灵活处理作用域的问题。

部分内容来自dj的帖子。

调用函数时，你可以把this想象为每个函数内的一个特殊（躲起来的）参数。

无论什么时候，JavaScript都会把this放到function内部。

它是基于一种非常简单的思想：

如果函数直接是某个对象的成员，那么this的值就是这个对象。

如果函数不是某个对象的成员那么this的值便设为某种全局对象（常见有，浏览器中的window对象）。

下面的内部函数可以清晰的看出这种思想。

一个函数，若是分配到某个变量的，即不属于任何对象下的一员，那么this的参数就变为windows对象。

下面是一个例子，可直接粘贴到Firebug的console：

varobj={

toString:

function（）{return'obj的范围内（作用域内）';},//重写toString函数，方便执行console.log（this）时的输出

func:

function（）{

//这里的函数直接从属于对象"object"

console.log（this）;

varinnerFunc=function（）{

//n这里的函数不是特定对象的直接成员，只是另外一个函数的变量而已

console.log（this）;

};

innerFunc（）;

}

};

obj.func（）;

//输出"obj的范围内（作用域内）"

//输出"Window的一些相关内容..."

缺省下是这样调用一个参数的-但你也可以人为地改变this参数，只是语法上稍微不同。

将最后一行的"obj.func（）;"改为：

obj.func.call（window）;

//输出"Window的一些相关内容..."

//输出"Window的一些相关内容..."

从上面的例子中可以发现，call实际上是另外一个函数（方法）。

call属于系统为obj.func内建的方法（根据JavaScript之特点可得知，函数是一种对象。

）。

通过这样改变this指向的作用域，我们可以继续用一个例子来修正innerFunc中的this参数，——“不正确”的指向：

varobj={

toString:

function（）{return'obj的范围内（作用域内）';},//重写toString函数，方便执行console.log（this）时的输出

func:

function（）{

//这里的函数直接从属与对象"object"

console.log（this）;

varinnerFunc=function（）{

//n这里的函数不是特定对象的直接成员，只是另外一个函数的变量而已

console.log（this）;

};

innerFunc.call（this）;

}

};

obj.func（）;

//输出"obj的范围内（作用域内）"

//输出"obj的范围内（作用域内）"

Ext的作用域配置

可以看到，没有分配作用域的函数，它的this"指向的是浏览器的window对象（如事件句柄eventhandler等等），——除非我们改变this的指针。

Ext的很多类中scope是一个配置项（configuration）能够进行指针的绑定。

相关的例子参考Ajax.request。

Ext的createDelegate函数

*除了内建的call/apply方法，Ext还为我们提供--辅助方法createDelegate。

该函数的基本功能是绑定this指针但不立刻执行。

传入一个参数，createDelegate方法会保证函数是运行在这个参数的作用域中。

如：

varobj={

toString:

function（）{return'obj的范围内（作用域内）';},//重写toString函数，方便执行console.log（this）时的输出

func:

function（）{

//这里的函数直接从属与对象"object"

console.log（this）;

varinnerFunc=function（）{

//n这里的函数不是特定对象的直接成员，只是另外一个函数的变量而已

console.log（this）;

};

innerFunc=innerFunc.createDelegate（this）;//这里我们用委托的函数覆盖了原函数。

innerFunc（）;//按照一般的写法调用函数

}

};

obj.func（）;

//输出"obj的范围内（作用域内）"

//输出"obj的范围内（作用域内）"

这是一个小小的例子，其原理是非常基本基础的，希望能够好好消化。

尽管如此，在现实工作中，我们还是容易感到迷惑，但基本上，如果能按照上面的理论知识去分析来龙去脉，万变还是不离其中的。

另外还有一样东西，看看下面的例子：

varsDs.load（{callback:

function（records）{

col_length=varsDs.getCount（）;//这里的varDs离开了作用域？

//col_length=this.getCount（）;//这个this等于store吗？

for（varx=0;x

{

colarray[x]=varsDs.getAt（x）.get（'hex'）;

}

}}）;

不过可以写得更清晰：

varobj={

callback:

function（records）{

col_length=varsDs.getCount（）;//这里的varDs离开了作用域？

//col_length=this.getCount（）;//这个this等于store吗？

//...

}

};

varsDs.load（obj）;

现在函数callback直接挂在obj上，因此this指针等于obj。

但是注意：

这样做没用的。

为什么？

因为你不知obj.callback最终执行时发生什么情形。

试想一下Ext.data.Store的load方法（仿造的实现）：

...

load:

function（config）{

varo={};

o.callback=config.callback;

//进行加载

o.callback（）;

}

...

这个仿造的实现中,回调函数的作用域是私有变量“o”。

因为通常你无法得知函数是如何被调用的，如果不声明作用域，你很可能无法在回调函数中使用this参数。

程序设计:

Tutorial:

如何合理地规划一个应用程序

需要些什么？

除ExtJS库本身外，我们还需要两个文件：

∙applayout.html

∙applayout.js

先看看一份html文档，比较精简。

并附有详细说明：

applayout.html

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"http:

//www.w3.org/TR/html4/loose.dtd">

--本地化的脚本引用在这里-->

Ext.onReady（myNameSpace.app.init,myNameSpace.app）;

开头的两行声明了文档的类型。

程序可以不用doctype,但是这样的话浏览器可能默认其为Quirks怪僻类型，会导致处理跨浏览器这一问题上出现差异。

我们采用HTML4.01Transitional的文档类型，该类型在主流浏览器上支持得不错。

当然，你也可以根据你的需求采用其它类型的doctype，但是记住别忘了要加上doctype。

接着指定HTML头部的Content-Type。

做这些事情其实很琐碎，但总是有益处。

然后引入EXT的样式，适配器和EXTJS本身。

有两种版本的ExtJS：

∙ext-all.js-不能直接阅读，加载时更快，用于产品发布

∙ext-all-debug.js-便于阅读，开发阶段使用,

开发阶段的时候便需要引入debug的版本。

applayout.js这个文件就是我们的程序，紧跟着的是本地化的脚本，这里可以换成Extjs翻译好的版本。

跟着我们开始分配事件句柄（eventhandler），使得在文档全部加载完毕后，程序就可以初始化（运行）。

下面的这一行：

Ext.onReady（myNameSpace.app.init,myNameSpace.app）;

可这样说：

当文档全部加载完毕，就运行myNameSpace.app的init方法,规定的作用域是myNameSpace.app。

然后是标题，头部的结尾，body（当前空）和结束标签。

applayout.js

/**

*ApplicationLayout

*byJozefSakalos,akaSaki

*

*/

/**

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

中文用户请注意：

applayout.js这个文件应该在编辑生成文件的同时强行定义为UTF-8编码才可以通过.

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

*/

//填充图片的本地引用

Ext.BLANK_IMAGE_URL='../extjs/resources/images/default/s.gif';

//创建命名空间

Ext.namespace（'myNameSpace'）;

//创建应用程序

myNameSpace.app=function（）{

//元素还没创建,未能访问

//私有变量

//私有函数

//公共空间

return{

//公共的属性,如,要转换的字符串

//公共方法

init:

function（）{

alert（'应用程序初始化成功。

'）;

}

};

}（）;//程序底部

//文件底部

文件最开始的几行是注释，说明该文件的主要内容、作者、作者相关的资讯。

没有任何注释的程序也可以正常的运行，————但请记住：

每次写的程序要容易给人看得懂的。

当你回头看你几个月前写的代码，发现你根本不记得自己写过什么的时候，就会明白这个道理，并养成编码的好习惯。

接着是要指向你服务器的填充图片，如不指定则默认。

每次运行程序的时候都访问，不推荐这样，应该先修改这个常量值指向到本地。

现在自定义命名空间。

将所有变量和方法都划分到一个全局对象下管理，这样的好处是避免了变量名冲突和由不同函数干扰了全局变量的值。

名字（namespace）可按自己的方案选择。

整段代码的重点是，我们创建了myNameSpace对象的属性