(ext入门手册.docVIP

Ext JS 学习笔记 目 录 1 开始extjs 1 1.1 获取extjs 1 1.2 应用extjs 1 1.3 演示HelloWord 2 2 组件的介绍和应用 3 2.1 介绍 3 2.2 应用 5 2.2.1 简单示例 5 2.3 组件详解 7 2.3.1 EXT.Panel 7 2.3.2 布局控件 9 2.3.3 表格控件 14 2.3.4 树形控件 15 2.3.5 表单控件Form 19 2.3.6 弹出窗口 22 3 Ext核心 28 3.1 Ext.Element 28 3.2 CSS样式操作 29 3.1 DOM操作 30 3.1 Ajax介绍 34 开始extjs 获取extjs 要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址/download把下载得到的ZIP压缩文件解压应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。因此，要使用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 ?fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式： script function fn() { alert(ExtJS库已加载!); } Ext.onReady(function () { alert(ExtJS库已加载!); } ); /script html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleExtJS/title 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 script Ext.onReady(function() { Ext.MessageBox.alert(hello,HelloWord); }); /script /head body /body /html 组件的介绍和应用 介绍 组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。基本组件有：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?????????