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之特殊用途。