EXTJS笔记.doc

第一章，初识ExtJS 0.ExtJS通常简称为EXT，它是一个非常优秀的Ajax框架，用JavaScript编写，与后台技术无关，可以用来开发具有炫丽外观的富客户端应用。 ExtJS是一个JavaScript库，它以HTML作为控件的骨干，以CSS作为样式的表现，以JavaScript作为粘合语言，可应用于不同浏览器的Ajax UI组件库，具备了Swing许多特性，并可兼容jQuery/Prototype等其他JS库。 1.ExtJS又简称Ext， 可以从/products/extjs/download/ 下载到Ext的必威体育精装版版本。 2.常见的Ext开发工具 JsEclipse;Aptana;Spket;Dreamweaver;Komodo Edit. 推荐使用eclipse结合Spket来作为开发工具。 3.在eclipse环境中安装Spket提示工具 (1).将spket中的子文件夹(plugins和features)拷贝到eclipse目录中覆盖原有的文件。 (2).打开eclipse点击Window--Preferences,选择左侧的Spket展开， 选择JavaScript Profiles,右侧点击New(添加一个新的项目)，这里输入ExtJS, 点击右侧的Add Library,下拉列表中选择ExtJS,选中ExtJS， 点击右侧的Add File,选择下载的Ext解压包中的ext.jsb2点击打开（导入了代码提示包，默认选择Ext All）。 再选中ExtJS(上一级)点击Default--OK (3).重启eclipse测试 新建一个JavaScript Project， New一个JS文件(test.js)， 在test,js上右键--Open With--选中Spket JavaScript Editor(表示我们使用的是Spket它的代码提示功能) 输入Ext代码，如Ext. 第二章，使用Ext文件制作基本的Ext页面 Hello Ext 应用Extjs需要在页面中引入Extjs的样式及Extjs库文件， 样式文件是resources/css目录下的extall.css这个文件， 而Ext的js文件库主要包括两个: 分别是adapter/ext目录下的ext-base.js，以及ext-all.js这两个文件。 ext-base.js表示框架的基础库， ext-all.js是Ext的核心库。 示例： head link type=text/css rel=stylesheet href=ext/resouces/css/ext-all.css/ script type=text/javascript src=extjs/adapter/ext/ext-base.js/script script type=text/javascript src=extjs/ext-all.js/script /head 在引用了必备文件之后，就可以书写基于Ext的Js代码了。 如下示例(Ext版的Hello World)： script type=text/javascript Ext.onReady(function(){ Ext.MessageBox.alert(hello,Hello,This is Exts MessageBox); }); /script 注意：这里的Ext.onReady表示页面的Dom加载完毕之后执行里面的代码， 这一点在实际开发中应用非常广泛， 因为为了保证我们的Ext代码能够正常的操作页面中的元素， 我们必须先等待页面中的Dom加载完毕之后才能操作， 否则就会出现找不到对象的错误。 这段代码表示，当页面加载完毕之后， 执行Ext.MessageBox这一行的语句。 这里的alert方法和javascript里面的alert方法比较： 页面效果如下： 可以看到在这个页面中弹出了一个对话框，并且这个对话框可以任意的拖动。 这个对话框完全是通过页面的样式进行控制的， 它要比默认情况下的window.alert()外观好看的多。 接下来我们使用Ext来显示一个窗口。 示例： 说明：这里，我们定义了一个Ext的Window，Window的标题是hello, Window的尺寸是300x200，里面的内容是一个一级标题标签。 实现效果如下： 页面弹出了一个窗体，该窗体也是可以任意拖动的。 第三章，Ext组件 1.组件的用法 组件可以直接通过new关键字来进行创建， 比如创建一个窗口：new Ext.Window() 创建一个表格：new Ext.GridPanel() 除了一些普