本文講述extjs mvc的Helloworld，tabPanel，event，頁面布局layout等內容。
本頁包含：MVC模式案例（一）~MVC模式案例（六），從搭建extjs mvc到點擊按鈕生成tab頁，事件點擊
本文代碼位置：http://download.csdn.net/download/xiaoliu123586/10156915
代碼使用idea打開即可，如果在windows下直接用瀏覽器打開index.html，加載data.json樹文件會找不到，必須在某服務器里打開或者或者idea打開，
訪問url類似：http://localhost:63342/extdemo/index.html?_ijt=8bt5l2b9lkvqhvs1gukmm1j5mk
而不是 file:///C:/Users/Mike/Desktop/extdemo/index.html
MVC模式案例（一）
即將實現網頁的布局有三部分組成：頂部標題、左側菜單和右側主題內容顯示。這里我們對案例的布局有個初步印象，方便今后我們的進一步學習。
了解了項目的最終效果，下面來看一下該案例最終的文件結構：
文件結構可以看出，在整個項目中，app文件夾是我們的主要工作目錄，其中包含：controller（控制器）、model（數據模型）、store（數據集）、view（視圖）。另外還有server文件夾，其主要目的是代替后台服務器為項目提供數據。這些內容我們將在今后的文章中逐步講解，今天我們來看一下index.html和app.js這兩個文件。
index.html文件代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ExtJS學習：MVC模式案例</title> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="../extjs/examples/shared/example.css" /> <script type="text/javascript" src="../extjs/bootstrap.js"></script> <script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body> <iframe id='contentIframe' name='contentIframe' style='height:100%;width:100%' frameborder="no"></iframe> </body> </html>
這個文件主要的目的就是對ExtJS框架文件的引用，這里我們不做過多的介紹。
app.js文件代碼：
Ext.onReady(function(){ //開啟懸浮提示功能 Ext.QuickTips.init(); //開啟動態加載 Ext.Loader.setConfig({ enabled: true }); //創建應用程序的實例 Ext.application({ //設定命名空間 name: 'Demo', //指定配置選項，設置相應的路徑 appFolder: 'app', //加載控制器 controllers: ['demoController'], //自動加載和實例化Viewport文件 autoCreateViewport: true }); });
app.js文件可以看成是對我們整個項目的全局設置，其中我們需要注意的有：
（1）Ext.Loader.setConfig幫我們開啟了自動加載的功能，這個功能默認是不開啟的，需要我們手動開啟，否則以后開發的很多文件都會找不到，報錯。
（2）name: ‘Demo’給項目規定了一個命名空間，它將作為一個全局變量應用於整個項目中，幫助我們識別屬於本項目的應用文件。
（3）appFolder: ‘app’這個配置項，幫我們指定到app文件夾中。
MVC模式案例（二）
ExtjS框架怎么使用MVC模式對代碼進行布局。
到目前為止我們現有的文件只有根目錄下的index.html和app.js兩個文件，不具有任何的實際意義。下面我們開始着手創建我們的項目，讓它能夠實實在在的展現在我們的瀏覽器中。首先，我們在根目錄下創建app文件夾，然后在app文件夾下創建controller和view兩個文件夾，分別存放我們的控制器文件和視圖文件。
定義ViewPort
VeiwPort代表整個瀏覽器顯示區域，該對象渲染到頁面的body區域，並會隨着瀏覽器顯示區域的大小自動改變，一個頁面中只能有一個ViewPort 實例。下面我們在view文件夾中創建Viewport.js文件，然后添加如下代碼：
Ext.define('Demo.view.Viewport', { extend: 'Ext.container.Viewport', //布局方式：border layout: 'border', items: [{ title:'ExtJS案例', collapisble: true, region:'north', height: 100, html: '<br><center><font size=5>MVC模式實現的ExtJS案例</font><br><font size=2>源碼來源:ITLee博客</font></center>' },{ title: '功能菜單', region: 'west', width: 180, split: true, collapisble: true, html:'這里是菜單部分' }, { id: 'mainContent', title: '主題內容顯示', layout: 'fit', region: 'center', collapisble: true, contentEl: 'contentIframe' }] });
在Viewport中我們用border的布局方式將整個網頁分為三個部分：頭部（north）、左部（west)、主題部分（center）。
定義一個控制器
控制器是整個應用程序的關鍵，他負責監聽事件，並對某些時間做出相應的動作。現在我們在controller文件夾下創建一個控制器，命名為demoController.js（這里的命名應該與app.js文件中加載的控制器名稱相同），然后我們為該文件添加以下代碼：
Ext.define('Demo.controller.demoController', { extend: 'Ext.app.Controller', //將Viewport.js添加到控制器 views: ['Viewport'] });
在控制器中我們通過views配置項，將所需視圖加載到控制器中。現在我們通過瀏覽器就可以對項目進行查看了，查看效果如下：
至此，我們對網頁的布局就算是完成了，希望對大家有所幫助。下一講我們將講解樹形菜單的實現。
MVC模式案例（三）
接下來，我們在view文件夾中添加一個menuTree.js文件，用來作為樹形菜單組件。為該文件添加以下代碼：
Ext.define('Demo.view.menuTree', { extend: 'Ext.tree.Panel', alias: 'widget.menutree', border: false, //規定錨鏈接地址的顯示區域 hrefTarget: 'mainContent', //是否顯示根節點 rootVisible: false, //數據集 store: 'menuStore', //菜單樣式 bodyStyle: { background: '#ffc', padding: '10px' } });
這樣我們就創建了一個菜單的組件，但是，現在我們的菜單還不能正常工作，因為菜單中還沒有填充數據。ExtJS4中我們用單獨的一個文件來創建數據模型和數據集，在創建數據集前我們首先創建數據模型。在app文件夾下創建model文件夾，並且在該文件夾下創建menuModel.js文件，為該文件添加以下代碼：
Ext.define('Demo.model.menuModel', { extend: 'Ext.data.Model', fields:[ {name:'id', type:'int'}, {name:'pid', type:'int'}, {name:'text', type:'varchar'}, //type為布爾型時，后面的默認值是必須寫的，要不會出錯 {name:'leaf', type:'boolean', defaultValue: true}, {name: 'url', type:'varchar'} ] });
有了數據模型，接下來我們創建store文件夾，以及在該文件夾下創建menuStore.js文件，添加下面的代碼：
Ext.define("Demo.store.menuStore",{ extend:'Ext.data.TreeStore', defaultRoodId:'root', //requires: 'Demo.model.menuModel',//我加了這兩行，會報錯 //model: 'Demo.model.menuModel', proxy:{ type:'ajax', url:'./server/data.json', reader:'json', autoLoad:true } });
數據集和數據模型都有了，那么我們怎么給菜單添加數據呢？一般情況下，菜單所需的數據都是有后台服務器提供，因為我們這里主要講解ExtJS的知識，盡量不去涉及后端的東西，我們可以用json格式模擬后台數據輸出。現在，我們在根目錄下創建server文件夾，在該文件夾下創建一個data.json的文件用來為前端提供數據：
[ {"id":"2", "pid":"1", "text":"用戶管理", "leaf":"0", "url":"http:\/\/www.lihuai.net", "children":[{ "id":"5", "pid":"2", "text":"基本信息", "leaf":"1", "url":"http:\/\/www.sogou.com", "children":""},{ "id":"11", "pid":"2", "text":"信息管理", "leaf":"1", "url":"http:\/\/www.sogou.com", "children":""},{ "id":"12", "pid":"2", "text":"添加用戶", "leaf":"1", "url":"http:\/\/www.sogou.com", "children":""}]}, {"id":"3", "pid":"1", "text":"產品管理", "leaf":"0", "url":"http:\/\/www.so.com", "children":[{ "id":"7", "pid":"3", "text":"產品信息", "leaf":"1", "url":"http:\/\/www.so.com", "children":""},{ "id":"8", "pid":"3", "text":"產品添加", "leaf":"1", "url":"http:\/\/www.so.com", "children":""}]} ]
為了簡單起見，每個節點的url地址我們用簡單的網頁替代。萬事俱備，只差加載了。那么，怎么才能將我們寫好的菜單組件加載到我們的項目中呢？
首先，修改我們的Viewport.js文件，將菜單組件添加到整個視圖中，修改后的代碼如下：
Ext.define('Demo.view.Viewport', { extend: 'Ext.container.Viewport', //布局方式 layout: 'border', items: [{ title:'ExtJS案例', collapisble: true, region:'north', height: 100, html: '<br><center><font size=5>MVC模式實現的ExtJS案例</font><br><font size=2>源碼來源:ITLee博客</font></center>' },{ title: '功能菜單', region: 'west', width: 180, split: true, collapisble: true, //這里是修改的部分 items:[{ xtype: 'menutree' }] }, { id: 'mainContent', title: '主題內容顯示', layout: 'fit', region: 'center', collapisble: true, contentEl: 'contentIframe' }] });
接下來，修改demoController.js文件，實現對菜單組件的加載，修改后的代碼：
Ext.define('Demo.controller.demoController', { extend: 'Ext.app.Controller', views: ['Viewport','menuTree'], stores: ['menuStore'], model: ['menuModel'] });
現在，用瀏覽器查看我們的案例，左側已經顯示出菜單欄了，效果如下圖：
當我們點擊樹形節點的時候，發現右側主題部分並沒有顯示網頁內容，這是因為我們還沒有為節點添加監聽事件的原因。具體如何添加切換頁面的效果，下一講我們將會詳細講解。
MVC模式案例（四）
我們基本實現了MVC模式布局ExtJS項目的目的，並且在瀏覽器中也可以看到最為常見的網頁布局結構。但是，作為WEB開發者，並不是能夠實現網頁布局就算是完成任務了，我們還需要實現一定的功能。在這一講中，我們將實現當點擊ExtJS菜單節點的時候，網頁主題部分顯示相對應的內容。
本講我們不會添加新的文件，只是對原來的文件進行修改即可。前面我們說過，控制器的主要作用是監聽事件，控制邏輯。所以，我們今天主要修改demoController.js這個文件，為我們的項目添加切換頁面的功能。
demoController.js文件代碼：
添加對menuTree組件的鼠標點擊事件進行監聽，修改后的代碼：
Ext.define('Demo.controller.demoController', { extend:'Ext.app.Controller', views: ['Viewport','menuTree'], stores: ['menuStore'], model: ['menuModel'], //通過init函數來監聽視圖事件，控制視圖與控制器的交互 init:function() { //init函數通過this.control來負責監聽 this.control({ //被監聽的組件的別名 'menutree': { //監聽鼠標點擊事件，點擊后調用changePage方法 itemclick:this.changePage, } }); }, changePage:function(){ alert('success'); } });
刷新頁面，點擊菜單幾點，彈出success說明我們監聽事件成功。下面我們繼續修改changePage方法，實現對主體內容部分頁面的切換功能。
changePage:function(view, rec, item, index, e){ //獲取url地址 var url = rec.get('url'); //獲取當前節點信息 var title = rec.get('text'); //將主體內容部分的url地址指定為我們獲取到的url Ext.getDom('contentIframe').src = url; //將主體內容框的標題設置為我們獲取的節點信息 Ext.getCmp('mainContent').setTitle(title); }
通過對changePage方法的修改，刷新頁面，當我們再次點擊節點的時候，右側主體內容部分將顯示對應url的頁面信息，大功告成。
MVC模式案例（五）
要實現右鍵菜單的功能，首先我們需要添加一個菜單組件，在view文件夾中新建contextMenu.js文件，該文件中添加以下代碼：
Ext.define('Demo.view.contextMenu', { extend: 'Ext.menu.Menu', alias: 'widget.contextmenu', float: true, items: [{ xtype: 'button', text: '添加', action: 'add', iconCls: 'leaf' }, { xtype: 'button', text: '刪除', action: 'del', iconCls: 'leaf' }, { xtype: 'button', text: '編輯', action: 'edit', iconCls: 'leaf' }] });
正如我們前面所說的，添加組件后需要在控制器中進行加載，否則ExtJS的自動加載機制將不能找到我們的文件，下面修改demoController.js文件的view配置項，修改后的代碼如下：
Ext.define('Demo.controller.demoController', { extend: 'Ext.app.Controller', //這次的修改在這里，給view配置項添加“contextMenu” views: ['Viewport','menuTree','contextMenu'], stores: ['menuStore'], model: ['menuModel'], //通過init函數來監聽視圖事件，控制視圖與控制器的交互 init: function() { //init函數通過this.control來負責監聽 this.control({ //被監聽的組件的別名 'menutree': { //監聽鼠標點擊事件，點擊后調用changePage方法 itemclick: this.changePage, } }); }, changePage:function(view, rec, item, index, e){ //獲取url地址 var url = rec.get('url'); //獲取當前節點信息 var title = rec.get('text'); //將主體內容部分的url地址指定為我們獲取到的url Ext.getDom('contentIframe').src = url; //將主體內容框的標題設置為我們獲取的節點信息 Ext.getCmp('mainContent').setTitle(title); } });
做完以上工作后，接下來就是為我們的menuTree組件添加右鍵監聽事件了，修改控制器文件demoController.js：
Ext.define('Demo.controller.demoController', { extend: 'Ext.app.Controller', views: ['Viewport','menuTree','contextMenu'], stores: ['menuStore'], model: ['menuModel'], //通過init函數來監聽視圖事件，控制視圖與控制器的交互 init: function() { //init函數通過this.control來負責監聽 this.control({ //被監聽的組件的別名 'menutree': { //監聽鼠標點擊事件，點擊后調用changePage方法 itemclick: this.changePage, //監聽鼠標右鍵事件，點擊后調用contextMenu方法 itemcontextmenu: this.contextMenu } }); }, //頁面切換方法 changePage:function(view, rec, item, index, e){ //獲取url地址 var url = rec.get('url'); //獲取當前節點信息 var title = rec.get('text'); //將主體內容部分的url地址指定為我們獲取到的url Ext.getDom('contentIframe').src = url; //將主體內容框的標題設置為我們獲取的節點信息 Ext.getCmp('mainContent').setTitle(title); }, //顯示右鍵菜單方法 contextMenu:function(tree, record, item, index, e, eOpts){ //阻止瀏覽器默認右鍵事件 e.preventDefault(); e.stopEvent(); //顯示右鍵菜單 var view = Ext.widget('contextmenu'); view.showAt(e.getXY()); } });
在demoController.js文件中添加以上代碼后，刷新頁面，在菜單節點上點擊右鍵，看到如下效果圖：
現在，我們整個案例教程就結束了，雖然還有很多功能沒實現，如果繼續擴展的話，怕是永遠也講不完了，呵呵，主要目的還是為ExtJS的新手們起一個引導的作用，希望對大家有所幫助。
MVC模式案例（六）
以上代碼的情況下，改成點擊菜單，生成tab的情況
修改demoController的changePage方法
changePage:function(view, rec, item, index, e){ var title = rec.get('text'); var leaf = rec.get('leaf'); var tabPanel = Ext.getCmp('mainContent'); //子節點才能打開，父節點不設置響應 if(leaf==false){ return; } //以title值設置為tab的id,打開時，有就使tab active，無則新建tab var newTab = tabPanel.getChildByElement(title); if (newTab == null) { tabPanel.add({ id: title, title: title, html: '當前頁面是 ' + title + '<br/><br/>', closable: true }); } tabPanel.setActiveTab(title); }
ViewPort.js里center布局的部分，改動如下
{ region: 'center', id: 'mainContent', xtype:'tabpanel', title: '主題內容顯示', layout: 'fit', collapisble: true }
此時，data.json的id和pid屬性可以去掉了（沒使用到了）
data.json:
[ { "text":"用戶管理", "leaf":"false", "url":"http://www.lihuai.net", "children":[ { "text":"基本信息", "leaf":"true", "url":"http://www.sogou.com", "children":"" }, { "text":"信息管理", "leaf":"true", "url":"http://www.sogou.com", "children":"" }, { "text":"添加用戶", "leaf":"true", "url":"http://www.sogou.com", "children":"" }]}, { "text":"產品管理", "leaf":"false", "url":"http://www.so.com", "children":[ { "text":"產品信息", "leaf":"true", "url":"http://www.so.com", "children":"" }, { "text":"產品添加", "leaf":"true", "url":"http://www.so.com", "children":"" }]} ]
注意，如果需要樹哪個節點默認展開，就在節點下配置"expanded:true" ，即修改data.json文件
======================================================================================================================
參考自：http://blog.csdn.net/luckypeng/article/details/43151793
有略微修正。
一下是一些個人實際代碼的貼出
Ext基本引入文件如下：
<script type="text/javascript" src="ext/ext-all.js"></script> <link rel="stylesheet" type="text/css" href="ext/theme-crisp/resources/theme-crisp-all.css" />
