ExtJS教程.docx

ExtJS教程.docx

《ExtJS教程.docx》由会员分享，可在线阅读，更多相关《ExtJS教程.docx（99页珍藏版）》请在冰豆网上搜索。

ExtJS教程

第1章闪烁吧！

看看extjs那些美丽的例子。

第1章闪烁吧！

看看extjs那些美丽的例子。

1.1.一切从extjs发布包开始

非常幸运的是，我们可以免费去下载ext发布包，里边源代码，api文档，例子一应俱全。

不过要是想访问svn获得最新的代码，就要花钱了。

不过我们现阶段只要这个免费的发布包就可以了，通过里边的范例，可以让我们体验一下ext的风范。

下载地址：

选择ext-1.1.1或者是ext-2.0下载。

明显可以看出来ext-2.0的版本高，12月

4日终于正式发布了，尚未经过详细测试，所以不敢说什么。

下面我们把两个版

本都介绍一点儿。

1.2.看看ext-1.1.1的文档

docs目录下是api文档，基本上所有的函数，配置，事件都可以在里边找到，直接打开index.html就可以查看，左侧菜单还包含了对examples目录下例子的引用，不过有些例子需要使用json与后台做数据交换，必须放到服务器上才能看到效果。

还有一些后台代码是使用php编写的，如果想看这些例子的效果，还需要配置php运行环境。

如果你用java，而且jdk在1.5以上，不如直接装个resin-3方便，它可以跑

php呢。

1.3.看看ext-2.0的文档

api文档依然在docs目录下，虽然可以看到左边的菜单，但是点击之后，右侧的api页面都是靠ajax获得的，所以不能直接在本地查看了，你必须把整个解压缩后的目录放到服务器上，通过浏览器访问服务器，才能看到。

问为什么docs打不开，只能看到一直loading的兄弟，都是因为没把这些东西放到服务器上的原因。

2.0中的api文档中没有例子的链接了，你需要自己去examples目录下找你需要的例子，然后打开看，当然还是有一些例子需要放在服务器上才能看到效果。

1.4.为什么有的例子必须放在服务器上才能看到效

果？

因为有些例子里，用到Ajax去后台读取数据，如果没在服务器上，Ajax返回的状态一直是失败，也无法获得任何数据，所有就看不到正确的效果。

不过以前在论坛上看到过有人写了localXHR，可以让ajax从本地文件系统获得数据，这样也许就可以摆脱服务器的束缚了。

1.5.为什么自己按照例子写的代码，显示出来总找不到图片

ext里经常用一个空白图片做占位符号，然后用css里配置的背景图片做显示，这样有利于更换主题。

这个空白图片的名字就是Ext.BLANK_IMAGE_URL，默认情况下它的值是BLANK_IMAGE_URL:

"http:

/"+"/小，也要去网上下载，一旦下载失败就显示找不到图片了。

看到这里可能有人奇怪了，为什么examples下的例子没有找不到图片的问题呢？

看来你没有仔细看例子那些代码呢，每个例子都引用了../examples.js。

在examples.js里设置了Ext.BLANK_IMAGE_URL=

'../../resources/images/default/s.gif';。

所以要解决自己写的例子找不到图片的问题，只需要照examples.js里修改s.gif的本地路径就可以了。

很简单

吧？

1.6.我们还需要什么？

•介于本人对firefox的喜爱，以及firebug在调试js过程中的便利，隆重向您推荐firefox+firebug的开发组合。

再说了ext开发者也都是倾向于firefox开发的，所以一般都是在firefox上跑的好好的，放到ie上就出问题。

这也跟ie自身的问题有些关系，可是目前ie占据90%的浏览器市场，最后我们还是需要让自己的项目在ie上跑起来，所以要求我们能写出跨浏览器的js来。

firebug的好处在于，可以显示动态生成的dom，你甚至可以在firebug

里直接对dom进行修改，而这些修改会直接反应到显示上。

太厉害了

firebug提供的console，可以直接执行js脚本，配置console.debug，

console.info，console.error等日志方法更便于跟踪。

对于ajax发送接收的数据，firebug都可以显示出来，并且可以查看发送的参数，以及返回的状态和信息。

1.7.入门之前，都看helloworld。

为了照顾连最基本应用都跑不起来的同志，我们给出两个入门版helloworld范例，并结合讲解，领你入门呢。

1.7.1.直接使用下载的发布包

•先去

•随便解压缩到什么目录下，不管目录名是什么，最后应该看到里边是这样的目录结构。

•现在我们利用它的目录结构，写一个helloworld例子。

进入上图中的examples目录，新建一个helloworld目录，helloworld

目录下新建一个helloworld.html文件，将下列内容复制进index.html

文件中。

rel="stylesheet"type="text/css"

href="../../resources/css/ext-all.css"/>

•双击helloworld.html打开页面，效果如下：

很高兴的告诉您，咱们的helloworld范例已经正确的执行了，下一步你最好把examples目录下的例子都看一看，再看看里边的代码怎么写的，好好感受一下ext的风范，再继续下去。

1.7.2.只把必要的东西放进项目中

想把ext放入自己的项目，需要自己整理一下，因为发布包里的东西并非都是必要的，比如文档，比如例子，比如源代码。

必要的最小集合是这样：

ext-all.js，adapter/ext/ext-base.js，

build/locale/ext-lang-zh_CN.js和整个resources目录。

•ext-all.js，adapter/ext/ext-base.js就包含了ext的所有功能，所有的js脚本都在这里了。

•build/locale/ext-lang-zh_CN.js是中文翻译。

•resources目录下是css样式表和图片。

自己的项目里只需要包含这些东西，就可以使用ext了。

使用时，在页面中导入：

放

href="${放置ext的目

录}/resources/css/ext-all.css"

/>

放

src="${放置ext的目

放

src="${放置ext的目

放

src="${放置ext的目

录}/ext-lang-zh_CN.js">

请注意js脚本的导入顺序，其他的就可以自由发挥了。

第2章震撼吧！

让你知道ext表格控件的厉害。

第2章震撼吧！

让你知道ext表格控件的厉害。

2.1.功能丰富，无人能出其右

无论是界面之美，还是功能之强，ext的表格控件都高居榜首。

单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功

能咱们就不提了。

自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。

再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。

更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。

呵呵~不过ext也不是万能的，与fins的ecside比较，ext不能锁定列（土豆说1.x里支持锁定列，但是2.0里没有了，因为影响效率。

），也没有默认的统计功能，也不支持excel，pdf等导出数据。

另外fins说，通过测试ecside的效率明显优于ext呢。

:

）

2.2.让我们搞一个grid出来耍耍吧。

光说不练不是我们的传统，让我们基于examples里的例子，来自己搞一个grid

看看效果，同时也可以知道一个grid到底需要配置些什么东西。

•首先我们知道表格肯定是二维的，横着叫行，竖着叫列。

跟设计数据库，新建表一样，我们要先设置这个表有几列，每列叫啥名字，啥类型，咋显示，这个表格的骨架也就出来了。

ext里，这个列的定义，叫做ColumnModel，简称cm的就是它，它作为整个表格的列模型，是要首先建立起来的。

这里我们建立一个三列的表格，第一列叫编号（code），第二列叫名称（name），第三列叫描述（descn）。

varcm=newExt.grid.ColumnModel（[

{header:

'编号',dataIndex:

'id'},

{header:

'名称',dataIndex:

'name'},

]）;

{header:

'描述',dataIndex:

'descn'}

看到了吧？

非常简单的定义了三列，每列的header表示这列的名称，

dataIndex是跟后面的东西对应的，咱们暂且不提。

现在只要知道有了三列就可以了。

•有了表格的骨架，现在我们要向里边添加数据了。

这个数据当然也是二维了，为了简便，我们学习examples里的array-grid.js里的方式，把数据直接写到js里。

•vardata=[

•['1','name1','descn1'],

•['2','name2','descn2'],

•['3','name3','descn3'],

•['4','name4','descn4'],

•['5','name5','descn5']

•];

很显然，我们这里定义了一个二维数据，（什么？

你不知道这是二维数组？

快改行吧，这里不是你该待的地方。

）

这个有五条记录的二维数组，显示到grid里就应该是五行，每行三列，正好对应这id,name,descn，在我们的脑子里应该可以想像出grid显示的结果了，为了让想像变成显示，我们还需要对原始数据做一下转化。

•因为咱们希望grid不只能支持array，还可以支持json，支持xml，甚至支持咱们自己定义的数据格式，ext为咱们提供了一个桥梁，Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。

现在咱们就来看看这个Ext.data.Store是如何转换array的。

•vards=newExt.data.Store（{

•proxy:

newExt.data.MemoryProxy（data）,

•reader:

newExt.data.ArrayReader（{},[

•{name:

'id'},

•{name:

'name'},

•{name:

'descn'}

•]）

•}）;

•ds.load（）;

ds要对应两个部分：

proxy和reader。

proxy告诉我们从哪里获得数据，

reader告诉我们如何解析这个数据。

现在我们用的是Ext.data.MemoryProxy，它是专门用来解析js变量的。

你可以看到，我们直接把data作为参数传递进去了。

Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行读取三个数据，第一个叫id，第二个叫name，第三个descn。

是不是有些眼熟，翻到前面cm定义的地方，哦，原来跟dataIndex是对应的。

这样cm就知道哪列应该显示那条数据了。

唉，你

要是能看明白这一点，那你实在是太聪明了。

记得要执行一次ds.load（），对数据进行初始化。

有兄弟可能要问了，要是我第一列数据不是id而是name，第二列数据不是name而是id咋办？

嗯，嗯，这个使用就用mapping来解决。

改改变成

这样：

vards

=newExt.data.Store（{

proxy:

newreader:

new

{name:

Ext.data.MemoryProxy（data）,Ext.data.ArrayReader（{},[

'id',mapping:

1},

{name:

'name',mapping:

0},

]）

}）;

{name:

'descn',

mapping:

2}

这样如截图所见，id和name两列的数据翻转了。

如此这般，无论数据排列顺序如何，我们都可以使用mapping来控制对应关系，唯一需要注意的

是，索引是从0开始的，所以对应第一列要写成mapping:

0，以此类推。

•哈哈，万事俱备只欠东风，表格的列模型定义好了，原始数据和数据的转换都做好了，剩下的只需要装配在一起，我们的grid就出来了。

•vargrid=new

•ds:

ds,

Ext.grid.Grid（'grid',{

•cm:

cm

•}）;

•grid.render（）;

注意：

上头是ext-1.x的写法，Ext.grid.Grid的第一个参数是渲染的id，对应在html里应该有一个