上面的圖檔中給出了TabPanel的一個效果圖，我們來看一下代碼：
這段代碼中，我們在TabPanel中放了兩個子項，一個是Panel，一個是TreePanel，每一個子項作為一個Tab展示在界面中。
我在代碼中放了一個Panel和一個TreePanel的目的是想告訴大家，TabPanel中的子項需要繼承自Panel，而TreePanel是繼承自Panel的，由此可以聯想到GridPanel、FormPanel等都可以作為TabPanel的子項來使用。
【題外話：在ExtJS中，出于效率的考慮，應該盡量減少items的嵌套，如果我們需要TabPanel的子項為TreePanel、GridPanel或FormPanel的時候，就沒必要再将這些控件嵌套在Panel中】
異步加載仍然是出于性能的考慮，按需加載，當使用者激活一個Tab标簽的時候，我們再将這個标簽的内容加載出來，進而避免加載未用到的資料。
接下來我們示範一下如何加載Tab2中的TreePanel
第一步，定義TabPanel，為Tab2添加Activate事件，用來處理激活操作：
第二步，伺服器端添加tab2_activate方法，用代碼動态生成樹，并添加到tab2中：
第三步，哈哈，沒有第三步了，編譯程式，重新整理頁面看看效果吧
當點選Tab2的标簽後，首先看到的是加載提示，如下圖：
加載完成以後才顯示出來樹節點。
效果：
代碼：
通過TabPosition控制Tab的位置，預設為Top（頂部），另外還可以是Bottom（底部）、Left（左側）和Right（右側）。
另外，還可以設定PageSize屬性，用來控制每頁顯示的内容條數
2021年9月 北京、西安兩地，高薪誠聘 .NET工程師，請私信聯系！
如果認為此文對您有幫助，别忘了支援一下哦！
聲明：本部落格原創文字隻代表本人工作中在某一時間内總結的觀點或結論，與本人所在機關沒有直接利益關系。轉載時請在文章頁面明顯位置給出原文連結。