MVC学习

从这个图中我们可以很清楚的看到M 、V、C在ExtJS4.0里面所对应数据类型。

靠右边是对应的代码结构。

下描述一下这model、store、view、controller以及application这几者之间的关系。

（1）application：它是MVC的入口，用来告诉ExtJS到那里去找对应js文件以及启动加载controller与view连个模块的代码。

//打开动态加载js功能
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name : 'AM',//应用的名字 (根) 利用MVC时这时定义的包路径需要与命名空间的层次关系一致
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'
]
});

（2）controller：这一层主要是用来处理业务逻辑，即View上一些动作所触发要执行的操作都在此实现。同时它也是关联view、store以及model的地方。

Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'userlist button[id=delete]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","您最少要选择一条数据");
}else{
//1.先得到ID的数据(name)
var st = gird.getStore();
var ids = [];
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
})
//2.后台操作(delet)
Ext.Ajax.request({
url:'/extjs/extjs!deleteData.action',
params:{ids:ids.join(",")},
method:'POST',
timeout:2000,
success:function(response,opts){
Ext.Array.each(data,function(record){
st.remove(record);
})
}
})
//3.前端操作DOM进行删除(ExtJs)
}
}
}
});
},
views:[
'List' //必须是文件名称
],
stores :[
"Users" //
],
models :[
"User" //这个就是store里面引用的model，所在js文件的名字，保持和定义model的类名一样。eg:AM.model.User
//（这个主要是给store层用的，当store在当前缓存中找不到指定命名空间定义的model时，再去加载User.js文件，
//再根据文件内容初始化定义model。如果缓存中已经有了model的定义，其实这个是可以不要的。）
//同样views、store都可以通过各种各样的工厂生成，来去掉。
]
});

（3）model、store：它们俩主要做为模型数据层。主要是给view层提供数据展示的。

//User数据集合
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
storeId: 's_user',
proxy:{
type:'ajax',
url:'/extjs/extjs!getUserList.action',
reader: {
type: 'json',
root: 'topics'
},writer:{
type:'json'
}
},
autoLoad: true //很关键
});

（4）view：这一层主要负责页面展示，也是确确实实能看见的一层。

<SPAN style="COLOR: #008000">Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',//别名定义
frame : 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_remove'},
{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);
}
});

</SPAN>