Ext2.x學習筆記

weixin_30639719發表於2020-04-05

Ext2.X學習筆記一

一、ExtJS簡介

 1.1 什麼是Ext JS?

  · Ext JS是一個Ajax框架,可以用來開發富客戶端的Ajax應用,是一個用javascript寫的,主要用於建立前端使用者介面。

  · Ext JS是一個用javascript編寫,與後臺技術無關的前端ajax框架。因此,可以把Ext用在.Net、Java、Php等各種開發語言開發的應用中。 

 ·利用Ext JS 構建的RIA Web應用具有與桌面程式一樣的標準使用者介面與操作方式,並且能夠橫跨不同的瀏覽器平臺。Ext JS已經成為開發具有完滿使用者體驗的Web應用完美選擇。

  · Ext JS最新版本是ext4.0,具有動畫功能。   

 1.2 獲取Ext JS?

 要使用Ext JS ,首先要得到ExtJ S 庫檔案,該框架是一個開源的,可以直接從官方網站下載,地址:http://extjs.com

   解壓縮包之後的目錄如下圖所示:

           

  Ext JS開發包介紹

     adapter:Ext的底層庫和核心程式碼

     docs:Ext提供的API,即幫助文件

     examples:官網提供的演示示例

     resources:主要存放的是樣式檔案和圖片檔案

     src:存放原始碼檔案

        ext-all:Ext的核心庫,是主檔案

二、Ext JS環境配置

  Ext JS是一個JS庫,所以只要將它放在Web應用程式的目錄下即可使用。它有兩種模式:釋出模式和除錯模式,即ext-all.js和ext-all-debug.js。前者是經過重新排版和壓縮的,檔案比較小,方便應用;後者是未經排版的原始格式,在開發過程中方便除錯。
     只需將以下檔案和資料夾加入程式即可:

    apapter/ext資料夾、resources資料夾和ext-all.js檔案

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

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

  <script type="text/javascript" src="ext-3.3.1/ext-all.js"></script>

  2.1 Ext JS開發工具

     開發利器Spket——是一款全面支援JavaScript的免費開發工具。它有外掛版和IDE兩種版本,我們選擇外掛版可以將它整合到Eclipse,這樣我們就可以快速開發Ext JS應用了。

     官方網站:www.spket.com

  2.2安裝好外掛後還需經過簡單的設定

    WindowàPreferences選項,在視窗左邊可以看到Spket選單項。選擇JavaScript Profiles,點New先建立ExtJS選項,再點Add Library,選擇外掛檔案ext.jsb2,最後選擇中所有的選項即可。

三、Ext JS類庫

  Ext JS 由一系列的類庫組成,一旦頁面成功載入了Ext JS 庫後,我們就可以在頁面中呼叫Ext JS 的類及控制元件來實現需要的功能。

   Ext JS 的類庫由以下幾部分組成:

  ·底層API(core)

  ·控制元件(widgets)

  ·實用工具(Utils)

3.1 底層API

      底層API 中提供了對Dom操作、查詢的封裝、事件處理、Dom 查詢器等基礎的功能。其它控制元件都是建立在這些底層API的基礎上,底層API位於原始碼目錄的core 子目錄中,包括DomHelper.js、Element.js 等檔案。

           

3.2  控制元件

  控制元件是指可以直接在頁面中建立的視覺化元件,比如皮膚、選項板、表格、樹、視窗、選單、工具欄、按鈕等等,在我們的應用程式中可以直接通過應用這些控制元件來實現友好、互動性強的應用程式的UI。控制元件位於原始碼目錄的widgets 子目錄中。

              

3.3 實用工具

     Ext 提供了很多的實用工具,可以方便我們實現如資料內容格式化、JSON資料解碼或反解碼、對Date、Array、傳送Ajax 請求、Cookie 管理、CSS管理等擴充套件等功能。

                    

四、Ext JS基礎元件

    

  Ext .Component是Ext JS中所有元件的基類,它的所有子類都自動享有了標準Ext JS元件的生命週期,包括建立、渲染和銷燬。它們也自動支援了標準的隱藏、顯示以及啟用、禁用等操作。

  元件大致可分成3大類:

    基本元件——Window、Panel、Button、Grid等

    表單元件——Form、Textfield等

    工具欄元件——ToolBar、Menu等

  靈活應用以上各種元件,就可做出具有優雅介面和良好使用者體驗的Web應用。
4.1 簡單例項 

  第一個應用——Hello World 

  <link rel=“stylesheet” type=“text/css” href=“../resources/css/ext-all.css" />

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

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

  <script  type="text/javascript">

     Ext.onReady(function(){

    Ext.Msg.alert('hello world','Hello World!');

     });

  </script>

4.2 基本元件 
  Ext JS的設計結構仿照了Java包和類的概念。所有元件都以類的形式存在,Ext是頂層包,使用時通過new關鍵字來建立。

     例如:var win = new Ext.Window({  //建立視窗

              el: 'window', //渲染

              width: 300, //設定視窗寬度

              height: 150, //設定視窗高度

              title: 'window', //設定視窗標題

          });

         win.show(); //顯示視窗

  Ext JS中的物件也有靜態方法,只要通過類名呼叫即可。

      例如: Ext.Msg.alert('Hello World', 'Hello World.');

4.3  工具欄元件  

  · ToolBar是用來存放功能按鈕的容器;

  · ToolBar中可以放置所有的FormPanel中的控制元件;

  · ToolBar可以放置在Panel, FormPanel,GridPanel,TreePanel等容器中。

  · Menu是一個選單物件,也是一個容器,可以把所有其它的選單項新增到其中。

五、Ext JS佈局  

  ·Accordion佈局(Ext.layout.Accordion)

  ·Border佈局(Ext.layout. BorderLayout)

  ·Column佈局(Ext.layout. ColumnLayout)

  ·Form佈局(Ext.layout. FormLayout)

  ·Fit佈局(Ext.layout. FitLayout)

  ·Table佈局(Ext.layout. TableLayout)

  ·Card佈局(Ext.layout. CardLayout)

5.1 Accordion佈局

   Accordion佈局由類Ext.layout.Accordion定義,名稱為accordion,表示可摺疊的佈局,也就是說使用該佈局的容器元件中的子元素是可摺疊的形式。

  在佈局中配置不同的引數,會展示出不同的效果。如:animate為true,表示在執行展開摺疊時是否應用動畫效果。activeOnTop為true,表示在點選每一個子元素的頭部名稱或右邊的按鈕,則會展開該皮膚,收縮其它已經展開的皮膚,並將點選的那個皮膚置於頂部顯示。
  具體的各個控制元件的動作和效果大家可以參考API。
       
5.2 Border佈局
  Border佈局由類Ext.layout.BorderLayout定義,佈局名稱為border。該佈局把容器分成東南西北中五個區域,分別由east,south, west,north, center 來表示,在往容器中新增子元素的時候,我們只需要指定這些子元素所在的位置,Border佈局會自動把子元素放到佈局指定的位置。
  
5.3 Column佈局

         Column佈局由Ext.layout.ColumnLayout類定義,名稱為column。列布局把整個容器元件看成一列,然後往裡面放入子元素的時候,可以通過在子元素中指定使用columnWidth或width來指定子元素所佔的列寬度。columnWidth表示使用百分比的形式指定列寬度,而width則是使用絕物件素的方式指定列寬度,在實際應用中可以混合使用兩種方式。

       

5.4 Form佈局

  Form佈局方式由類Ext.layout.FormLayout提供,定義的名稱為form。一般情況只用於formPanel的佈局,把formPanel中的各子元素按每行一列的方式進行佈局顯示。

    

5.5 Fit佈局

  Fit佈局方式由Ext.layout. FitLayout類定義,名稱為fit。填充佈局方式是把容器中的子元素覆蓋容器的整個區域。

     

六、總結
   Ext JS是一個強大的js類庫

   Ext JS配置方便且相容各種瀏覽器

   基於物件導向程式設計(oop),並且以事件驅動模型為基礎的。

   為建立富客戶端應用(RIA)提供了豐富的元件物件

   和後臺程式碼無關,不管是C#換是JAVA也或者PHP,都和它沒關係

   相對豐富的文件和示例

   4.0版本提供了動畫效果,提高了使用者的感知度

 

轉載於:https://www.cnblogs.com/lucky-girl/p/3628673.html