ExtJS開發(fā)框架簡介講解課件

ExtJS開發(fā)框架簡介

EXT簡介

EXT常用組件Ext框架

布局Ext框架簡介什么是ext？Ext是一個Ajax框架，可以用來開發(fā)帶有華麗外觀的富客戶端應(yīng)用。Ext是一個用javascript編寫，與后臺技術(shù)無關(guān)的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各種開發(fā)語言開發(fā)的應(yīng)用中。Ext最新版本是ext6.0Ext框架簡介Ext提供一系列的對象類，這些基本上都是用于處理WEB頁面控件。Ext的發(fā)布包括三個方面的內(nèi)容：API參考手冊、示例程序及開發(fā)包。Ext框架簡介開發(fā)包Ext框架簡介示例程序Ext示例程序包共包括十六大類近100示例程序。Ext框架簡介APIdocsExt類庫簡介底層API(core)：底層API

中提供了對DOM

操作、查詢的封裝、事件處理、DOM

查詢器等基礎(chǔ)的功能。其它控件都是建立在這些底層api

的基礎(chǔ)上，底層api

位于源代碼目錄的dom

子目錄中，包括Helper.js、Element.js

等文件。Ext類庫簡介控件(widgets)：指可以直接在頁面中創(chuàng)建的可視化組件。在我們的應(yīng)用程序中可以直接通過應(yīng)用這些控件來實現(xiàn)友好、交互性強(qiáng)的應(yīng)用程序的UI?？丶挥谠创a目錄的子目錄中。Ext類庫簡介實用工具Utils：Ext

提供了很多的實用工具，可以方便我們實現(xiàn)如數(shù)據(jù)內(nèi)容格式化、JSON數(shù)據(jù)解碼或反解碼、Date格式、Array存儲、發(fā)送Ajax

請求、Cookie

管理、CSS

管理等擴(kuò)展等功能Accordion布局Ext中布局的方式--Ext.layout.Accordion由類Ext.layout.Accordion定義，名稱為accordion，表示可折疊的布局，也就是說使用該布局的容器組件中的子元素是可折疊的形式在布局中配置不同的參數(shù)，會展示出不同的效果。如：animate為true，表示在執(zhí)行展開折疊時是否應(yīng)用動畫效果。activeOnTop為true,表示在點擊每一個子元素的頭部名稱或右邊的按鈕，則會展開該面板，收縮其它已經(jīng)展開的面板，并將點擊的那個面板置于頂部顯示。具體的各個控件的動作和效果大家可以參考APIBorderLayout布局Ext中布局的方式--Ext.layout.BorderLayout由類Ext.layout.BorderLayout定義，布局名稱為border。該布局把容器分成東南西北中五個區(qū)域，分別由east，south,west，north,center來表示，在往容器中添加子元素的時候，我們只需要指定這些子元素所在的位置，Border布局會自動把子元素放到布局指定的位置CardLayout布局Ext中布局的方式--Ext.layout.CardLayout(選項卡)由Ext.layout.CardLayout類定義，名稱為card，該布局將會在容器組件中某一時刻只顯示一個子元素?？梢詽M足安裝向?qū)Аab選項板等應(yīng)用中面板顯示的需求。ColumnLayout布局Ext中布局的方式--Ext.layout.ColumnLayout由Ext.layout.ColumnLayout類定義，名稱為column。列布局把整個容器組件看成一列，然后往里面放入子元素的時候，可以通過在子元素中指定使用FormLayout布局Ext中布局的方式--Ext.layout.FormLayout布局方式由類Ext.layout.FormLayout提供，定義的名稱為form。一般情況只用于formPanel的布局，把formPanel中的各子元素按每行一列的方式進(jìn)行布局顯示。FitLayout布局Ext中布局的方式--Ext.layout.FitLayout由Ext.layout.FitLayout類定義，名稱為fit。填充布局方式是把容器中的子元素覆蓋容器的整個區(qū)域TableLayout布局Ext中布局的方式--Ext.layout.TableLayout

這種布局方式由類Ext.layout.TableLayout提供，定義的名稱為table。一般情況不采用這種布局方式，因為其不能自適合屏幕或其父容器的寬度和高度。Anchor布局anchor布局將使組件固定于父容器的某一個位置，使用anchor布局的子組件尺寸相對于容器的尺寸，即父容器容器的大小發(fā)生變化時，使用anchor布局的組件會根據(jù)規(guī)定的規(guī)則重新渲染位置和大小。AnchorLayout布局沒有任何的直接配置選項（繼承的除外），然而在使用AnchorLayout布局時，其子組件都有一個anchor屬性，用來配置此子組件在父容器中所處的位置。Ext常用組件TabsGridsTreesFormsToolbarandM