ExtJS教程Word格式.docx

1、+/ 小，也要去网上下载，一旦下载失败就显示找不到图片了。看到这里可能有人奇怪了，为什么 examples 下的例子没有找不到图片的问题呢？ 看来你没有仔细看例子那些代码呢，每个例子都引用了./examples.js。在 examples.js 里设置了 Ext.BLANK_IMAGE_URL =././resources/images/default/s.gif;。所以要解决自己写的例子找不到 图片的问题，只需要照 examples.js 里修改 s.gif 的本地路径就可以了。很简单吧？1.6. 我们还需要什么？ 介于本人对 firefox 的喜爱，以及 firebug 在调试 js 过程

2、中的便利，隆 重向您推荐 firefox+firebug 的开发组合。再说了 ext 开发者也都是倾向 于 firefox 开发的，所以一般都是在 firefox 上跑的好好的，放到 ie 上 就出问题。这也跟 ie 自身的问题有些关系，可是目前 ie 占据 90%的浏览 器市场，最后我们还是需要让自己的项目在 ie 上跑起来，所以要求我们 能写出跨浏览器的 js 来。firebug 的好处在于，可以显示动态生成的 dom，你甚至可以在 firebug里直接对 dom 进行修改，而这些修改会直接反应到显示上。太厉害了firebug 提供的 console，可以直接执行 js 脚本，配置 con

3、sole.debug，console.info，console.error 等日志方法更便于跟踪。对于 ajax 发送接收的数据，firebug 都可以显示出来，并且可以查看发 送的参数，以及返回的状态和信息。1.7. 入门之前，都看 helloworld。为了照顾连最基本应用都跑不起来的同志，我们给出两个入门版 helloworld 范 例，并结合讲解，领你入门呢。1.7.1. 直接使用下载的发布包 先去 随便解压缩到什么目录下，不管目录名是什么，最后应该看到里边是这样 的目录结构。 现在我们利用它的目录结构，写一个 helloworld 例子。进入上图中的 examples 目录，新建一个

4、 helloworld 目录，helloworld目录下新建一个 helloworld.html 文件，将下列内容复制进 index.html文件中。script type=text/javascript src=././adapter/ext/ext-base.js/script././ext-all.js./examples.jsscript Ext.onReady（function（）Ext.MessageBox.alert（helloworld, Hello World.）;）; 双击 helloworld.html 打开页面，效果如下：很高兴的告诉您，咱们的 helloworld 范

5、例已经正确的执行了，下一步你最好把 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 的所有功能，所有 的 j

6、s 脚本都在这里了。 build/locale/ext-lang-zh_CN.js 是中文翻译。 resources 目录下是 css 样式表和图片。自己的项目里只需要包含这些东西，就可以使用 ext 了。使用时，在页面中导入：放link rel=$放置 ext 的目录/resources/css/ext-all.css 录/ext-base.js 录/ext-all.js/src=录/ext-lang-zh_CN.js请注意 js 脚本的导入顺序，其他的就可以自由发挥了。第 2 章 震撼吧！让你知道 ext 表格控件的厉害。让你知道ext表格控件的厉害。2.1. 功能丰富，无人能出其右无论是

7、界面之美，还是功能之强，ext 的表格控件都高居榜首。 单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。自动生成行号，支持 checkbox 全选，动态选择显示哪些列，支持本地以及远程 分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。再加上可编辑 grid，添加新行，删除一或多行，提示脏数据，推拽改变 grid 大 小，grid 之间推拽一或多行，甚至可以在 tree 和 grid 之间进行拖拽，啊，这 些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在 ext 表格控件里实现 了。呵呵不过 ext 也不是万能的，与 fins 的 ec

8、side 比较，ext 不能锁定列（土豆 说 1.x 里支持锁定列，但是 2.0 里没有了，因为影响效率。），也没有默认的统 计功能，也不支持 excel，pdf 等导出数据。另外 fins 说，通过测试 ecside 的 效率明显优于 ext 呢。:）2.2. 让我们搞一个grid出来耍耍吧。光说不练不是我们的传统，让我们基于 examples 里的例子，来自己搞一个 grid看看效果，同时也可以知道一个 grid 到底需要配置些什么东西。 首先我们知道表格肯定是二维的，横着叫行，竖着叫列。跟设计数据库， 新建表一样，我们要先设置这个表有几列，每列叫啥名字，啥类型，咋显 示，这个表格的骨架也

9、就出来了。ext 里，这个列的定义，叫做 ColumnModel，简称 cm 的就是它，它作为整 个表格的列模型，是要首先建立起来的。这里我们建立一个三列的表格，第一列叫编号（code），第二列叫名称 （name），第三列叫描述（descn）。var cm = new Ext.grid.ColumnModel（header:编号,dataIndex:id,名称name）;描述descn看到了吧？非常简单的定义了三列，每列的 header 表示这列的名称，dataIndex 是跟后面的东西对应的，咱们暂且不提。现在只要知道有了三 列就可以了。 有了表格的骨架，现在我们要向里边添加数据了。这个数据

10、当然也是二维 了，为了简便，我们学习 examples 里的 array-grid.js 里的方式，把数 据直接写到 js 里。 var data = 1,name1descn1,2name2descn23name3descn34name4descn45name5descn5 ;很显然，我们这里定义了一个二维数据， （什么？你不知道这是二维数 组？快改行吧，这里不是你该待的地方。这个有五条记录的二维数组，显示到 grid 里就应该是五行，每行三列， 正好对应这 id,name,descn，在我们的脑子里应该可以想像出 grid 显示 的结果了，为了让想像变成显示，我们还需要对原始数据做一下转化

11、。 因为咱们希望 grid 不只能支持 array，还可以支持 json，支持 xml，甚 至支持咱们自己定义的数据格式，ext 为咱们提供了一个桥梁， Ext.data.Store，通过它我们可以把任何格式的数据转化成 grid 可以使 用的形式，这样就不需要为每种数据格式写一个 grid 的实现了。现在咱 们就来看看这个 Ext.data.Store 是如何转换 array 的。 var ds = new Ext.data.Store（ proxy: new Ext.data.MemoryProxy（data）, reader: new Ext.data.ArrayReader（, nam

12、e: ） ）; ds.load（）;ds 要对应两个部分：proxy 和 reader。proxy 告诉我们从哪里获得数据，reader 告诉我们如何解析这个数据。现在我们用的是 Ext.data.MemoryProxy，它是专门用来解析 js 变量的。 你可以看到，我们直接把 data 作为参数传递进去了。Ext.data.ArrayReader 专门用来解析数组，并且告诉我们它会按照定义 的规范进行解析，每行读取三个数据，第一个叫 id，第二个叫 name，第 三个 descn。是不是有些眼熟，翻到前面 cm 定义的地方，哦，原来跟 dataIndex 是对应的。这样 cm 就知道哪列应该

13、显示那条数据了。唉，你要是能看明白这一点，那你实在是太聪明了。记得要执行一次 ds.load（），对数据进行初始化。有兄弟可能要问了，要是我第一列数据不是 id 而是 name，第二列数据不 是 name 而是 id 咋办？嗯，嗯，这个使用就用 mapping 来解决。改改变成这样：var ds= new Ext.data.Store（proxy: new reader: newname:Ext.data.MemoryProxy（data）, Ext.data.ArrayReader（, , mapping: 1,0,）,mapping: 2这样如截图所见，id 和 name 两列的数据翻转了

14、。如此这般，无论数据排 列顺序如何，我们都可以使用 mapping 来控制对应关系，唯一需要注意的是，索引是从 0 开始的，所以对应第一列要写成 mapping:0，以此类推。 哈哈，万事俱备只欠东风，表格的列模型定义好了，原始数据和数据的转 换都做好了，剩下的只需要装配在一起，我们的 grid 就出来了。 var grid = new ds: ds,Ext.grid.Grid（grid, cm: cm grid.render（）;注意：上头是 ext-1.x 的写法，Ext.grid.Grid 的第一个参数是渲染的 id， 对应在 html 里应该有一个 的东西，这样 grid才知道要把自己

15、画到哪里。创建完 grid 以后，还要用 grid.render（）方法，让 grid 开始渲染，这样 才能显示出来。 好了，把所有代码组合到一起，看看效果吧。 var cm = new Ext.grid.ColumnModel（ header: ）; var grid = new Ext.grid.Grid（看看吧，这就是咱们搞出来的 grid 了。html 例子是 lingo-sample/1.1.1 目录下的 02-01.html，把这个目录 copy 到ext-1.x 的 example 目录下，就可以直接打开观看效果。2.3. 上边那个是 1.x的，2.0 稍微有些不同哦首先，Ext

16、.grid.Grid 已经不见了，咱们需要用 Ext.grid.GridPanel。需要传递 的参数也有少许区别。vargrid = new Ext.grid.GridPanel（el:, ds:cm:看到了吗？负责指定渲染位置的 id 放到了里边，对应的名字是 el。似乎 ext2 里对这些参数进行了统一，比以前更整齐了。因为其他地方都一样，我就不多说了，html 例子在是 lingo-sample/2.0 目录下 的 02-01.html。从截图上看，少了斑马条，下边多了一条线，应该只是 css 有所不同吧。默认情况下，两个版本的 grid 都可以拖拽列，也可以改变列的宽度。不知道怎 么禁

17、用这两个功能呢。最大的不同应该是 1.x 里默认支持的右键效果，在 2.0 里不见了。按 shift 和 ctrl 多选行的功能倒是都有。区别是，全选后，1.x 必须按住 ctrl 才能取消，直接单击其中一个行，不会取消全选功能，而 2.0 里只需要任意点击 一行，就取消全选，只选中刚才点击的那行。哦，哦，那颜色不要也算是区别吧。2.4. 按顺序，咱们先要把常见功能讲到，让grid支持按列排序其实很简单，需要小小改动一下列模型。cm = newExt.grid.ColumnModel（,sortable:true,如果你英语还可以，或者懂得查字典的话（软件翻译也算），那么你就会知道， 多出来的

18、这个 sortable 属性应该是可以排序的意思。现在咱们试一下改动后的效果。看到了没有？编号的标题上有个小小的箭头，表格里的数据也是按照编号做的逆 序排列，如此简单，我们就实现了按列排序。很有趣的是，2.0 加上 sortable 以后，1.x 那种右键功能也跑回来了，不过它用 的不是右键，而是下拉菜单似的实现方式。什么？你问为什么其他两列无法排序？！嗯，好像是因为你还没有给另两列添加sortable 属性。怎么加？按编号那样加就行了。还是不会？-_-。true这样所有列都可以排序了。怎么取消排序？2.5. 让单元格里显示红色的字，图片，按钮，你还能想到什么？嘿，希望你跟我一样，不愿意只能在

19、 grid 里看到文字，至少不是单调的，毫无 特色的文字。有些人就问了，如果我想改变一下单元格里显示内容，应该怎么办呢？非常不幸的是，ext 的作者，伟大的 jack 早已经想到了，说真的，你没想到的， 他都想到了，不只想到了，他还做出来了。唉，这就是区别啊。为啥你就不能动手做些东西呢？就知道向别人要这要那，唉。首先，我宣布，偶们的数据要扩充啦，每个人要加上一个性别字段。var data = malefemale, ;男女搭配，干活不累撒。而且现在中国就是男多女少，我就还没对象呢。征婚中， 单身女性加（QQ）771490531 详谈。你可以试试不改其他的部分，显示的结果是不会改变的，因为原始数

20、据要经过ds 的处理才能被 grid 使用，那么下一步我们就开始修改 ds，把性别加进去。var ds = new Ext.data.Store（ new Ext.data.MemoryProxy（data）, reader:sex添加了一行name:，把数组的第二列映射为性别。现在 grid 可以感觉到sex 了，嘿嘿。不过 grid 还显示不了性别这列，因为咱们还没改 cm。性别到现在其实都没什么新东西，但是你不觉得光看平板字，很难分出哪个是 GG 哪 个是 MM 吗？听说过红男绿女没？要是男的都加上红色，女的都变成绿色，那不是清楚多了。就像下面一样。怎么样？是不是效果大不同了。你不会认为很难吧，嗯，确实，如果你对 html