Extjs第一课

  一、 Extjs 简介

ExtJS 是一个 Ajax 框架，是一个用 javascript 写的，用于在客户端创建丰富多彩的 web 应用程序界面。

ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用，主要用于创建前端用户界面，是一个与后台技术无关的前端 ajax 框架。因此，可以把 ExtJS 用在 .Net 、 Java 、 Php 等各种开发语言开发的应用中。

 

二、 extjs 的 js 库文件

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.js 、 Element.js 等文件 .

控件 (widgets) ：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的 UI 。

实用工具 Utils ： Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、 JSON 数据解码或反解码、对 Date 、 Array 、发送 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 对象管理，与浏览器 W 3C 标准事件对象 Event 相对 应， Ext 封装了一个 Ext.EventObject 事件对象。

支持事件处理的类 ( 或接口 ) 为 Ext.util.Observable ，凡是继承该类的组 件或类都支持往对象中添加事件处理及响应功能。

ExtJS 使用 Ajax 方式提供了一套与服务器交互的机制