一、 Extjs简介
ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。
ExtJS可以用来开发RIA也即富客户端的AJAX应用,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.NetJavaPhp等各种开发语言开发的应用中。
 
二、extjsjs库文件
1. adapter/ext/ext-base.js   表示框架基础库
2. ext-all.js 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开始的
方法一:
<script>
 function fn()
 {
 alert(‘ExtJS
库已加’);
 }
 Ext.onReady(fn);
 </script>
方法二:
 <script>
 function fn()
 {
 alert(‘ExtJS
库已加载!’);
 }
 Ext.onReady(function ()
 {
 alert(‘ExtJS
库已加载!’);
 }
 );
</script>
 
四、ExtJS的类库的组成
底层API(core):底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的core子目录中,包括DomHelper.jsElement.js等文件.
控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI
实用工具UtilsExt提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对DateArray、发送Ajax请求、Cookie管理、CSS管理等扩展等功能
 
五、ExtJS中的组件体系
1. 基本组件
2. 工具栏组件
3. 表单及元素组件
 
基本组件:
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.Separator
 工具栏分隔符
tbspacer         Ext.Toolbar.Spacer
 工具栏空白
tbsplit          Ext.Toolbar.SplitButton
工具栏分隔按钮
tbtext           Ext.Toolbar.TextItem
 工具栏文本项
 
表单及字段组件包含
form               Ext.FormPanel Form面板 
checkbox       Ext.form.Checkbox
 checkbox录入框
combo            Ext.form.ComboBox
 combo选择项
datefield         Ext.form.DateField
 日期选择项
field                Ext.form.Field
 表单字段
fieldset           Ext.form.FieldSet
 表单字段组
hidden            Ext.form.Hidden
表单隐藏域
htmleditor       Ext.form.HtmlEditor
 html编辑器
numberfield    Ext.form.NumberField
 数字编辑器
radio              Ext.form.Radio
 单选按钮
textarea         Ext.form.TextArea
 区域文本框
textfield          Ext.form.TextField
 表单文本框
timefield         Ext.form.TimeField
 时间录入项
trigger            Ext.form.TriggerField
 触发录入项
 
所有的组件都继承自Ext.Component,列出组件基类Component中的配置属性
六、事件处理
ExtJS提供了一套强大的事件处理机制,通过这些事件处理机制来响应用户的动作、监控控件状 态变化、更新控件视图信息、与服务器进行交互等等。
事件统一由Ext.EventManager对象管理,与浏览器W3C标准事件对象Event相对 应,Ext封装了一个Ext.EventObject事件对象。
支持事件处理的类(或接口)Ext.util.Observable,凡是继承该类的组 件或类都支持往对象中添加事件处理及响应功能。
ExtJS使用Ajax方式提供了一套与服务器交互的机制