Ext Js 搭建及核心组件介绍（一）

瘦身后的ext脚本库：

1、保留adapter目录下的适配器（最底层的支持）

2、resources目录，所有的图片及css样式库

3、src/locale下去掉其他的语言国家，保留zh_CN.js

4、保留ext-all.js

搭建步骤：

1、WebRoot下创建extjs文件夹，将瘦身后的extjs库导入文件夹内

2、页面引入css及js:

<link rel="stylesheet" type="text/css" href="<%=path %>/extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="<%=path %>/extjs/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="<%=path %>/extjs/ext-all.js"></script>

<script type="text/javascript" src="<%=path %>/extjs/locale/ext-lang-zh_CN.js"></script>

其中js引入必须按照以上顺序引入。

Ext核心组件介绍：

1、类Ext.Component 全体Ext组件的基类。Component下所有的子类均按照统一的Ext组件生命周期（lifeycle）执行运作， 即创建、渲染和销毁（creation、rendering和destruction），并具 有隐藏/显示、启用/禁用的基本行为特性。Component下的子类可被延时渲染（lazy-rendered）成为Ext.Container的一种，同时自动登记到Ext.ComponentMgr，这样便可在后面的代码使用Ext.getCmp获取组件的引用。当需要以盒子模型（box
model）的模式管理这些可视的器件（widgets），这些器件就必须从Component（或Ext.BoxComponent）继承。每种component都有特定的类型，是Ext自身设置的类型。

基本组件

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 components

---------------------------------------

toolbar Ext.Toolbar

tbbutton Ext.Toolbar.Button（已废弃，用button代替）

tbfill Ext.Toolbar.Fill

tbitem Ext.Toolbar.Item

tbseparator Ext.Toolbar.Separator

tbspacer Ext.Toolbar.Spacer

tbsplit Ext.Toolbar.SplitButton（已废弃，用splitbutton代替）

tbtext Ext.Toolbar.TextItem

表单组件 Form components

---------------------------------------

form Ext.FormPanel

checkbox Ext.form.Checkbox

combo Ext.form.ComboBox

datefield Ext.form.DateField

field Ext.form.Field

fieldset Ext.form.FieldSet

hidden Ext.form.Hidden

htmleditor Ext.form.HtmlEditor

label Ext.form.Label

numberfield Ext.form.NumberField

radio Ext.form.Radio

textarea Ext.form.TextArea

textfield Ext.form.TextField

timefield Ext.form.TimeField

trigger Ext.form.TriggerField

图表组件 Chart components

---------------------------------------

chart Ext.chart.Chart

barchart Ext.chart.BarChart

cartesianchart Ext.chart.CartesianChart

columnchart Ext.chart.ColumnChart

linechart Ext.chart.LineChart

piechart Ext.chart.PieChart

Store对象 Store xtypes

---------------------------------------

arraystore Ext.data.ArrayStore

directstore Ext.data.DirectStore

groupingstore Ext.data.GroupingStore

jsonstore Ext.data.JsonStore

simplestore Ext.data.SimpleStore （已废弃，用arraystore代替）

store Ext.data.Store

xmlstore Ext.data.XmlStore

2、类Ext.BoxComponent ：

任何使用矩形容器的作可视化组件Ext.Component的基类，该类的模型提供了自适应高度、宽度调节的功能，具备大小调节和定位的能力。要打算让一个现成有的元素为BoxComponent服务，使用el的配置选项，指定是哪个一个元素。

var pageHeader = new Ext.BoxComponent({

el: 'my-header-div'

});

3、类Ext.Container

Ext.Container继承自Ext.BoxComponent,提供了两个重要参数layout 和items,layout指定组件使用何种布局，items包含当前组件中的所有组件。

4、类Ext.Panel

面板是一种面向用户界面构建应用程序最佳的单元块，一种特定功能和结构化组件。面板包含有底部和顶部的工具条，连同单独的头部、底部和body部分。它提供内建都得可展开和可闭合的行为，连同多个内建的可制定的行为的工具按钮。面板可简易地置入任意的容器或布局，而面板和渲染管线（rendering pipeline）则由框架完全控制。如果不指定xtype，默认就是使用Ext.Panel。

5、类Ext.TabPanel

一种基础性的tab容器。Tab面板可用像标准Ext.Panel一样参与布局，亦可将多个面板归纳为一组tabs之特殊用途。