2012/7/25Extjs学习笔记
1.要使用Extjs框架的页面中一般要包括下面几句：
①<link rel="stylesheet" type="text/css" href="extjs/resource/css/ext-all.css"/>
②<script type="text/javascript" src="extjs/adapter/ext/ext-base.js">
③<script type="text/javascript" src="extjs/ext-all.js"></script>
在Extjs库文件及页面内容加载完后，Extjs会执行Ext.onReady()中指定的函数，因此可以说，一般情况下每一个用户的Extjs应用都是从Ext.onReady()开始的。使用Extjs应用，程序代码大致如下：
<script>
Ext.onReady(function(){
alert("Extjs库已经加载");
});
</script>
我们还可以在页面中显示一个窗口。
代码如下：
Ext.onReady(function(){
var win = new Ext.Window(
{
title:'hellp',
html:'<h1>hello,this is your window~</h1>'
}
);
win.show();
});
3.Extjs代码由以下几部分组成：
①底层API：底层API提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层API的基础上，底层API位于extjs包下的src/core目录下。
②控件(widgets):控件是指可以在页面中直接创建的可视化组件，比如面板、选项板、表格、窗口、工具栏、菜单、按钮等。在我们的程序中可以使用控件来实现友好、交互性强的UI。控件位于extjs包下的src/widgets目录下。
③实用工具Utils:Extjs提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、array、发送ajax请求，cookie管理、CSS管理扩展等功能。
4.Extjs有一个结构和层次分明的组件体系，这些组件组成了Ext的控件，Ext组件有Component类定义。每一种组件都有一个xtype属性值。通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。
组件体系如下图所示：
组件大致可以分为三大类：即基本组件、工具栏组件、表单及元素元素组件。
基本组件有：
| xtype | class | 意义 |
| box | Ext.BoxComponent | 具有边框属性的组件 |
| Button | Ext.Button | 按钮 |
| colorpaletter | Ext.ColorPaletter | 调色板 |
| 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.PaginToolbar | 工具栏中的间隔 |
| panel | Ext.Panel | 面板 |
| progress | Ext.ProgressBar | 进度条 |
| splitbutton | Ext.SplitButton | 可分裂的按钮 |
| tabpanel | Ext.TabPanel | 选项面板 |
| treepanel | Ext.tree.TreePanel | 树 |
| viewport | Ext.ViewPort | 视图 |
| window | Ext.Window | 窗口 |
工具栏组件有：
| xtype | Class | 意义 |
| toolbar | Ext.ToolBar | 工具栏 |
| tbbutton | Ext.Toolbar.Button | 按钮 |
| tbfill | Ext.Toolbar.Fill | 文件 |
| tbitem | Ext.Toolbar.Item | 工具栏项目 |
| tbseparator | Ext.Toolbar.Seperator | 工具栏分隔符 |
| tbspace | Ext.Toolbar.Space | 工具栏空白 |
| 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 触发录入项
4.组件的使用
组件可以直接通过关键字来创建，比如创建一个窗口，可以使用new Ext.Window(),创建一个表格则使用new Ext.GridPanel().当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的属性及值，组件根据构造函数中的参数属性值来初始化组件。比如：
var obj = {title:'hello',html:'hello,this is extjs!'};
var panel = bew Ext.Panel(obj);
panel.render("hello");
<div id="hello"> </div>
可以省掉obj，直接写成以下形式：
var panel = new Ext.Panel({renderTo:'hello',title:'hello',html:'<h1>hello,this is extjs</h1>'});
render方法后面的参数表示页面上div元素id,也可以如上表示，直接在参数中加入renderTo属性。
对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要父组件的构造函数中，通过给属性items传递数组方式实现构造，代码如下：
var panel = new Ext.TabPanel(
width:300,
height:200,
items:[
{title:'first'},
{title:'second'}
]
);
panel.render("hello");
以上代码也可以按照下面的方式写：
var panel = new Ext.TabPanel({
width:300,
height:200,
items:[
new Ext.Panel({title:'first'}),
new Ext.Panel({title:'second'})
]
});
panel.render("hello");
对比这两段代码，前者不仅省略了new Ext.Panel();这个函数，更重要的是，前者只有在初始化TabPanel时，才会创建子面板，而后者则在程序一开始就创建了子面板。也就是说前者实现了延迟加载。
5.组件的配置属性
在Extjs中，除了一些特殊的组件和类之外，所有的组件都可以在初始化的时候在构造函数中使用一个包含属性名称和值的对象，该对象中的信息也就是指组件的配置属性。
比如配置一个面板：
var a = new Ext.Panel({
title:'面板',
html:'面板内容',
height:100
});
注意，当属性值为数字时，不需要加单引号。
创建一个按钮：
var b =new Ext.Button({
text:'添加',
pressed:true,
height:30,
handler:Ext.emptyFn
});
注意：当属性值为boolean时，不需要加单引号。
创建一个viewport及其中的内容：
var viewport = new Ext.Viewport({
layout:'border',
items:[
{region:'north',
title:'面板',
html:'面板内容',
height:100
},
{
region:'center',
title:'表格',
xtype:'grid',
store:store,
cm:colm,
autoExpandColumn:3
}
]
});
每一个组件除了继承基类中的属性以外，还会根据需要增加组件的配置属性，另外，子类中有时候还会把父类的一些配置属性的含义及用途重新定义。学习Extjs，最重要的掌握Extjs中各个组件的配置及具体的含义。些配置属性在下载下来的ExtJS 源码文档中都有详细的说明，可以通过这个文档详细了解每一个组件的特性。由于所有的组件都继承自Ext.Component,因此，在这里我们列出组件基类Component中的配置属性简单介绍。
allowDomMove boolean 当渲染这个组件时是否允许移动Dom节点。（默认值为true）；
applyTo Mixed 混合参数，表示把该组件应用到指定的对象。参数可以是一节点的id,一个DOM节点或一个存在的元素或与之相对应的在document中已出现的id.当使用applyTo,也可以提供一个id或CSS的class名称，如果子组件允许，他将创建一个。如果只有applyTo,所有传到render方法的值将被忽略。并且目标元素的父节点将自动指定为这个组件的容器。当使用applyTo选项后，则不需要再调用render()方法来渲染组件;
autoShow boolean 自动显示，如为true,则组件将检查所有隐藏类型的class(如："x-hidden"或"y-hide-display"并在渲染时移除（默认为false）);
cls String 给组件添加额外的信息，（默认值为“），如果想自定义组件或它的子组件的样式，这个选项是非常有用的；
ctCls String 给组件的容器添加额外的信息，默认值为");
disabled Boolean 渲染该组件为禁用状态；
hideMode : String 这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）默认为“display ”；
hideParen:Boolean 是否隐藏容器。当该值为true时，将会显示或隐藏组件的容器。为false时则只会隐藏和显示组件本身。（默认为false）.
listeners:Object 给对象配置多个事件监听器，在对象初始化时会初始化这些监听器。
plugins:Object/Array 一个对象或数组，将用于增加组件的自定义功能。一个有效的组件插件必须包含一个init方法，该方法可以带一个Ext.Component类型参数。当组件建立后，如果该组件包含有效的插件，将调用每一个插件的init()方法，把组件传递个插件，使插件能实现对组件的方法调用及事件应用等，从而实现对组件功能的扩展。
stateEvents:Array 定义需要保存组件状态信息的事件。当指定的事件发生时，组件会保存它的状态（默认为none），其值为这个组件支持的任意event类型，包含组件自身的或自定义事件。（例如：[“click”,”customerchange”]）。
stateId:String 组件的状态ID,状态管理器使用该id来管理组件的状态信息，默认值为组件的id.
style:String给该组件的元素指定特定的样式信息， 有效的参数为Ext.Element.applyStyles中的值。
xtype:String 指定所要创建组件的xtype，用于构造函数中没有意义。该参数用于在容器组件中创建子组件并延迟实例化和渲染时使用。如果是自定义的组件，则需要用Ext.ComponentMgr.registerType来进行注册，才会支持延迟实例化和渲染。
el:Mixed 相当于applyTo
