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