EXT_JS个人整理笔记.doc

EXTJS实用开发指南 1、要使用ExtJS 框架的页面中一般包括下面几句： link rel=stylesheet type=text/css href=extjs/resources/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 在ExtJS 库文件及页面内容加载完后，ExtJS 会执行Ext.onReady 中指定的函数，因此 可以用，一般情况下每一个用户的ExtJS 应用都是从Ext.onReady 开始的，使用ExtJS 应用，程序的代码大致如下： script function fn() { alert(“ExtJS库已加”); } Ext.onReady(fn); /script 2、 A： fn 也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式： script Ext.onReady(function () { alert(“ExtJS库已加载!”); } ); /script B： 进一步，我们可以在页面上显示一个窗口，代码如下： script Ext.onReady(function() { Var win=new Ext.Window({title:hello,width:300,height:200,html:h1Hello,easyjf open source/h1});//参数是标题,宽度,高度,html文本 win.show(); }); /script 3、ExtJS 的类库由以下几部分组成： 底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询 器等基础的功能。其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的 core 子目录中，包括DomHelper.js、Element.js 等文件 控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、 表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控 件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中 实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON 数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功 能 4、Ext2.0 对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组 件体系，由这些组件形成了Ext 的控件，Ext 组件是由Component 类定义，每一种组件都有 一个指定的xtype 属性值，通过该值可以得到一个组件的类型或者是定义一???指定类型的组 件。 组件体系由下图所示： 组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。 基本组件有： xtype Class box Ext.BoxComponent 具有边框属性的组件 Button Ext.Button 按钮 colorpalette Ext.ColorPalette 调色板 component Ext.Component 组件 container Ext.Container 容器 cycle Ext.CycleButton dataview Ext.DataView 数据显示视图 datepicker Ext.DatePicker 日期选择面板 editor Ext.Editor 编辑器 editorgrid Ext.grid.EditorGridPanel 可编辑的表格 grid Ext.grid.GridPanel 表格 paging Ext.PagingToolbar 工具栏中的间隔 panel Ext.Panel 面板 progress Ext.ProgressBar 进度条 splitbutton Ext.SplitButton 可分裂的按钮 tabpanel Ext.TabPanel 选项面板 treepanel Ext.tree.TreePanel 树 viewport Ext.ViewPort 视图 window Ext.Window 窗口 工具栏组件有 toolbar Ext.Toolbar 工具栏 tbbutton Ext.Toolbar.Button 按钮 tbfill Ext.Toolbar.Fill 文件 tbitem Ext.Toolbar.Item 工具条项目 tbseparator Ext.Toolbar.S