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"
]
});
});