由於自己從android開發轉來學習web開發，最近在學習Jsp，之前接觸過一點Extjs，所以用jsp來配合ext試試。
Ext JS介紹
extjs是一個javascript框架，它的好處就是有它自己的界面和事件處理。我們根據它的語法就可以實現我們想要的功能，具體我就不介紹了，自己百度。
Ext MVC結構介紹
不管任何時候，做一個大項目總是很煩的。因為大，所以開發的時候很難去組織，維護的時候就更別說了。隨着業務增長肯定更頭疼了。Ext的MVC和你在其它地方了解到的所以MVC的功能一樣，它的目的就是：
1、組織你的代碼，讓它易於維護
2、減少你的代碼量
Ext MVC結構組成
- Model 就是字段和數據，類似於java當中的實體bean
- View 看名字你就愛猜到了，對，沒錯，用來顯示的組件。
- Controllers Controllers一般就是做一些操作的地方。
MVC文件結構
先來看一下官方文檔給出的一張圖 
好了，先有個大概的認識，接下來開始實際操作。
本例演示用的開發工具是Intellij idea
項目搭建
無論用什么工具，最開始的一步當然是創建一個web項目了
1、創建一個web項目
1、打開intellij創建一個新項目，之后勾選JavaEE下的Web application，選擇自己的項目目錄一個項目就創建完畢了。 
2、創建完畢后，項目目錄如下 
src里放的就是java代碼，web就是我們的項目根目錄。此時還需要配置你的Tomcat容器，指定你的項目web路徑。具體如下
3、點擊IDE右上角的三角形editConfigurations，之后在左邊點擊+,尋找Tomcat Server,然后點擊Local。這樣一個Tomcat配置項就出現了 
4、Tomcat配置項添加之后還需要指定Tomcat的目錄，和web項目的目錄，只需要選定你的Tomcat目錄和你項目的web文件夾。 
這樣一個web項目就可以運行了，點擊右上角run,在瀏覽器里輸入localhost:8080可以訪問就到下一步。
2、集成Ext Js
1、ext作為一個javascript框架，我們只需要在頁面簡單的通過引入javascript的方式就可以使用了。
在web文件夾新建一個js文件夾，把extjs的sdk放入，然后在首頁引入
index.jsp代碼如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>extjsDemo</title> <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css"> <script type="text/javascript" src="js/extjs/ext-all.js"></script> <script type="text/javascript" src="js/extjs/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="app/appjs/app.js"></script> </head> <body> </body> </html>
這樣index.jsp就能夠使用ext了，注意最后一行script飲用了app.js，這是ext應用的開始的地方。
在文章開始說到ext官網給出的MVC文件結構都是在app文件夾之后的，所以在web下新建一個app文件夾
3、使用Ext Js的MVC結構
在app.js里創建應用
沒個ext js 4應用都以一個Application類開始。Application包含了應用文件夾的設置，以及一個啟動函數，在Application啟動之后會調用。所以我們在app文件夾創建app.js，當然名字你可以隨便取，我們在里面寫一個Application
Ext.application({ requires: ['Ext.container.Viewport'], name: 'AM', appFolder: 'app', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Users', html : 'List of users will go here' } ] }); } });
上面的代碼通過Ext.application創建了一個名叫AM 的Application類，並且指定了應用的文件夾為app，launch函數，在加載完畢之前會調用，這里可以看到創建了一個Viewport類，items就是它包含的內容，包含了一個panel，里面簡單的設置了一段文字。
此時你再刷新index.jsp，效果是這樣了,完全沒寫什么樣式，是不是很酷，而且你可以根據皮膚換效果 
定義一個Controller
ext中的Controllers一般都和application一起使用，用來監聽處理事件。下面代碼創建了一個簡單的控制器，記得創建在controller文件夾下。
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Initialized Users! This happens before the Application launch function is called');
}
});
創建之后還要在application中引用
Ext.application({
...
controllers: [
'Users'
],
...
});
當在瀏覽器中訪問index.jsp的時候，由於在applicaton在指定了controller,所以controller會自動加載，controller中的 init函數會在Application類的lauch函數之前調用。
打開瀏覽器打開console 控制台會發現輸出了Initialized Users! This happens before the Application launch function is called
Controller的init函數通常會調用－control()來設置事件監聽。
如下：
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
}
});
在init函數中調用了control，查找viewport類下的任何panel類， render表示顯示事件，即當panel顯示是輸出The panel was rendered
修改為上面代碼，再刷新，console控制台就打印了。
看到這里，基本的事件處理就演示了，在深入了解之后就可以做更多事件了，哈哈。好了，下面來看view
定義一個Controller
ext含有很多view組件，下面是一個簡單的例子，我們在view文件夾下建立List.js代表用戶列表，代碼
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',//別名，在其他地方引用可以直接用userlist
title: 'All Users',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
}; //做演示，這是指定了數據
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];//用來grid顯示的列，會將store中name相同的數據顯示
this.callParent(arguments);
}
});
注意這里define之后的名字，‘AM.view.user.List’,AM是我們創建application時指定的 name，view對呀mvc的view,也就是view文件夾下user文件夾下的 List，其他所有文件都是按照這個模式的，就是mvc。
view創建好之后，需要在Controller里引用，由於用了weight.userlist來作為alias別名，所以在Controller中可以直接使用別名引用
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List'
],
init: ...
onPanelRendered: ...
});
還記得之前在application中在launch之后直接顯示了一個 panel嗎，現在有了自己的view,我們就不用panel了，直接將view添加到application
Ext.application({ ... launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: { xtype: 'userlist' } }); } });
這樣在啟動之后就會加載view了，重新刷新瀏覽器，效果如圖： 
簡單的設置了數據源指定grid的columns就可以顯示了是不是很酷，可惜現在的數據不是真實數據。
之前在controller中監聽了panel的render事件，不過由於是顯示事件所以可能感覺不爽。結下來我們操作grid。
Controller中操作grid
通過雙擊在console控制台輸出一條信息,看controller代碼
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List'
],
init: function() {
this.control({
'userlist': {
itemdblclick: this.editUser
}
});
},
editUser: function(grid, record) {
console.log('Double clicked on ' + record.get('name'));
}
});
只是簡單的修改了control中的代碼，監聽userlist，itemdbclick代表的是雙擊事件，指向了editUser,監聽的輸入了Double clicked on ’ + record.get(‘name’)
再次刷新，雙擊 
那我們要是想直接編輯gird呢
編輯的時候肯定需要一個form，來看代碼
Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias: 'widget.useredit',
title: 'Edit User',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',// form表單
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
});
上面代碼定義了一個用來顯示的window，其中包含了一個form表單和兩個按鈕。
那么我們要contoller里肯定需要在雙擊的時候顯示window，將原始數據填入 form。
好了，上代碼
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List',
'user.Edit'
],
init: ...
editUser: function(grid, record) {
var view = Ext.widget('useredit');//找到window
view.down('form').loadRecord(record);window下的 form，回填數據。
}
});
創建Model和Store
之前我們在創建view的時候直接將數據寫在了view里，其實可以在 view中引用Store，store是封裝數據的地方，可以從服務器加載也可以本地配置。
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
fields: ['name', 'email'],
data: [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
//簡單的指定了本地數據
});
需要在Controller中引用stores
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: [
'Users'
],
...
});
這樣在view里我們就可以直接使用store
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
// we no longer define the Users store in the `initComponent` method
store: 'Users',
initComponent: function() {
this.columns = [
...
});
接下來到model
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['name', 'email']
});
store和controller里需要引用model，
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
data: [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
});
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: ['Users'],
models: ['User'],
...
});
這樣和之前的效果一樣。
store能夠從服務端加載數據用來顯示在view中。由於篇幅有限就暫時不做介紹了。這里主要講解Ext js的MVC。
其實就是以Ext.application為開始，指定了項目名之后,
命名就以 項目名.view或controller或store或model.文件名。
中間你可以加根據功能區分的文件夾，這樣就很好管理和維護了。
最后附上一下demo的文件結構
哈哈，extjs的mvc是不是很好理解了，如何在src也用上MVC就更好了。點個贊唄。