跟大家講解下有關ExtJs 學習筆記基礎篇 Ext組件的使用_extjs，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說ExtJs 學習筆記基礎篇 Ext組件的使用_extjs，小編也收集到了有關ExtJs 學習筆記基礎篇 Ext組件的使用_extjs的相關資料，希望大家看到了會喜歡。
昨天剛接觸到Extjs，簡單寫了篇學習筆記，今天繼續。天介紹一下Ext中組件舉幾個簡單的例子做說明。注意：文章內容有些摘自本人學習過程中看到的資料。 Ext2.0對框架進行了非常大的重構，其中最重要的是形成了一個結構及層次分明的組件體系，由這些組件形成了Ext控件。Ext組件由Component類定義，每一種組件都有一個指定的xtype屬性值，通過該值可以得到一個組件的類型或者是定義一個指定類型的組件。 Ext組件體系由下圖所示： 組件大致可分成三大類，即基本組件、工具欄組件、表單元素組件。 基本組件有
這么多的組件，可都是非常酷的。組件使用可以直接通過關鍵字new 來創建，比如上篇文章中說到的創建一個Window框 var win=new Ext.Window(); 除了這種創建方式，一般都會在構造函數中加一些配置屬性來初始化組件。比如創建一個面板： <html> <head> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script src="extjs/ext-base.js" type="text/javascript"></script> <script src="extjs/ext-all.js" type="text/javascript"></script> <script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script> <script language="javascript"> function panel(){ var params={title:"Hello",width:300,height:200,html:"<h1>一個面板</h1>"}; var panel=new Ext.Panel(params); panel.render("panel"); } </script> </head> <body> <input type="button" onclick="panel()" value="顯示面板"> <hr/> <p id="panel"></p> </body> </html> 關鍵代碼： function panel(){ var params={title:"Hello",width:300,height:200,html:"<h1>一個面板</h1>"}; var panel=new Ext.Panel(params); panel.render("panel"); } params是設置Panle的參數，title:標題，width:寬度,height：高度,html:面板顯示的內容 var panel=new Ext.Panel(params); 這句代碼創建了一個面板，并在構造函數中設置了面板屬性。 panel.render("panel"); 表示頁面上的p元素id.、 代碼可以簡寫為：
復制代碼 代碼如下:
var panel=new Ext.Panel({renderTo:"panel",title:"Hello",width:300,height:200,html:"<h1>一個面板</h1>"});
對于組件中的子元素組件，都支持延遲加載的方式創建控件，此時可以直接通過父容器的items傳遞數組方式實現。 function panel(){ var params={ title:"Hello", width:300, height:200, html:"<h1>一個面板</h1>", items:[ new Ext.Panel({title:"Panel1",height:100}), new Ext.Panel({title:"Panel2",height:100}) ] }; var panel=new Ext.Panel(params); panel.render("panel"); } 
如果需要讓組件顯示出不同的效果，我們就需要通過構造函數中的參數設置。 由于組件都繼承自Ext.Component,因此所有組件可能有共同的屬性，如下圖
Extjs提供了一套強大的事件處理機制，專門處理用戶動作、監控控件狀態、更新控件視圖信息、與服務器交互等等。事件由Ext.EventManager對象管理，與瀏覽器W3C標準事件對象Event相對應，Ext封裝了一個Ext.EventObject事件對象。支持事件處理的類（或為接口）為Ext.util.Observable,凡事繼承該類的組件或類都支持往對象中添加時間處理及響應功能。 我們在頁面上加一個按鈕 <input type="button" id="btntest" value="測試事件"> 在寫一個函數 function eventtest(){ Ext.Msg.alert("提示","觸發了一個事件！"); } 下面通過Ext的事件處理機制為btntest這個按鈕添加一個點擊事件，點擊后調用eventtest方法。 Ext.onReady( function(){ Ext.get("btntest").addListener("click",eventtest); } ); 在Ext組件加載完畢后直接給按鈕添加一個click事件。Ext.get("btntest").addListener(事件,事件執行方法，無需加括弧); Ext還支持延遲事件處理緩存等功能，比如下面的代碼： Ext.get("btntest1").addListener("click",eventtest,this,{delay:2000}); <input type="button" id="btntest1" value="延遲事件"> Ext.get("btntest1").addListener("click",eventtest,this,{delay:2000});這句代碼為按鈕注冊了一個click事件，但會延遲2000毫秒執行。 可以為html元素添加事件了，我們還可以控制Ext組件的事件，在看一個例子。 function eventwindow(){ var win=new Ext.Window({ title:"控制Ext組件的事件", height:200, width:300 }); win.on( "beforedestroy", function(obj){ Ext.Msg.alert("哈哈","你關不掉了吧！"); obj.show(); return false; } ); win.show(); } 每個組件都含有beforedestroy事件，Ext會在銷毀這一組件時觸發該事件。 這段代碼會顯示一個窗體，并且點擊關閉按鈕時會失效。通過Window的on方法來控制.. on(事件,事件執行函數).由于窗口對象的beforedestroy事件響應函數返回值為false，因此執行這段程序，窗體才無法關閉。組件的時間監聽器也可以直接在構造函數中直接聲明，下面的代碼會和上面同一效果： function eventwindow(){ var win=new Ext.Window({ title:"控制Ext組件的事件", height:200, width:300, listeners:{ "beforedestroy": function(obj){ Ext.Msg.alert("哈哈","你關不掉了吧！"); obj.show(); return false; } } }); win.show(); } 效果如下： 
OK，這就是Ext組件的介紹與使用。各位有什么問題可以留言一起討論，有什么不對的地方請指正。 此文章中用的例子都只是簡單介紹，后面會詳細講解。
來源：php中文網