MVC開發模式環境搭建

概述：講Java開發中的View層前台使用MVC模式來開發，更加容易管理和維護等，講model、controller、view很好的分開來管理，並且extjs提供application來統

一管理，系統會自動載入對應的層中的js檔案。

一、熟悉目錄結構
根目錄-->app
       -->controller
            -->Users.js
      -->model
            -->User.js
      -->store
            -->Users.js
      -->view
            -->List.js

-->app.js
-->mvc.html
二、分層的代碼實現
1.首先建立model層，定義User類  User.js
Ext.define("AM.model.User",{
extend:"Ext.data.Model",
fields:[
{name:"name",type:"string",srotable:true},
{name:"age",type:"int",srotable:true},
{name:"email",type:"string",srotable:true}
]
});
2.定義store層資料集類  User.js
var userData=[
{name:"張帥鵬",age:21,email:"marico_zhang@163.com"},
{name:"王",age:21,email:"marico@163.com"},
{name:"宋",age:21,email:"zhang@163.com"},
{name:"李",age:21,email:"marico_zhang@163.com"},
{name:"陳",age:21,email:"zhang@163.com"},
{name:"喬",age:21,email:"marico_zhang@163.com"}
];
Ext.define("AM.store.Users",{
extend:"Ext.data.Store",
model:"AM.model.User",
storeId:"s_user", //可以用StroeManager進行管理
proxy:{
type:"memory",
data:userData
},
autoLoad:true
});
3.定義view層中的List.js
Ext.define("AM.view.List",{
extend:"Ext.grid.Panel",
title:"Grid Demo", //標題
frame:true,  //面板渲染
alias:"widget.userlist",  //設定別名
//forceFit:true, //設定是否自動填滿
width:600,
height:280,
columns:[  //列模式  並設定前台編輯
{text:"Name",dataIndex:"name",width:100},
{text:"Age",dataIndex:"age",width:100},
{text:"Email",dataIndex:"email",width:350,
field:{
xtype:"textfield",
allowBlank:false
}
}
],
tbar:[   //上方工具列
{xtype:"button",text:"添加",iconCls:"table_add"},
{xtype:"button",id:'delete',text:"刪除",iconCls:"table_delete"},
{xtype:"button",text:"修改",iconCls:"table_edit"},
{xtype:"button",text:"查看",iconCls:"table_comm"}
],
dockedItems:[{
xtype:"pagingtoolbar",
store:"Users",
dock:"bottom",//指定在那個位置
displayInfo:true  //設定顯示

}],
//設定前台編輯，首先在列模式中指定，然後使用外掛程式機制來添加外掛程式
plugins:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit:2
})
],
selType:"checkboxmodel",  //設定選擇模式，設定成多選框的模式
multiSelect:true,   //設定成多選
store:"Users", //指定資料集
initComponent:function(){
this.callParent(arguments);
}
});
4.定義controller層中的Users.js
Ext.define("AM.controller.Users",{
extend:"Ext.app.Controller",
init:function(){
this.control({
"userlist button[id=delete]":{
click:function(o){
//得到這個grid表格對象  
//var grid=o.findParentByType("gridpanel"); //使用方法得到
var grid=o.ownerCt.ownerCt;//使用屬性得到
//Ext.Msg.alert("資料統計：","共"+grid.getStore().getCount()+"條資料資訊");
//得到選中的資料集合
var data=grid.getSelectionModel().getSelection();
if(data.length==0){
Ext.Msg.alert("提示","你最少要選擇一條資料");
}else{
//1.先得到ID的資料(name) 也就是DB中的主鍵
var st=grid.getStore();
var ids=[];
Ext.Array.each(data,function(record){
ids.push(record.get("name"));
});
//2.後台操作(delete)
// Ext.Ajax.request({
// url:"",
// params:{ids:ids.join(",")},
// method:"POST",
// timeout:2000,
// success:function(response,opts){
// //請求成功，再刪除前台資料
// Ext.Array.each(data,function(record){
// ids.push(record.get("name"));
// });
// }
// });
//3.前端操作DOM進行刪除(ExtJs) 也就是同步一下資訊
Ext.Array.each(data,function(record){
st.remove(record);
});
}
}
}
});
},
views:["List"],
stores:["Users"],
models:["User"]
});
5.定義app.js管理這些層次的類
Ext.onReady(function(){
//初始化Ext組件
Ext.QuickTips.init();
//開啟Loader
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name:"AM",// 應用的名字
appFolder:"app",//應用的目錄
launch:function(){ //當前頁面載入完成執行的函數
Ext.create("Ext.container.Viewport",{
layout:"auto", //自動填滿布局
items:{
xtype:"userlist",
title:"Users",
html:"List of users will go here"
}
});
},
controllers:[
"Users"
]
});
});