EXTJS三层架构MVC
1）这个例子程序改写上一篇博客中的gridPanel，将它改写成MVC模式
2）讲解了grid下列模式
3）讲解了grid下selection和表格特性feature
首先看看MVC框架图：
ExtJS MVC是一个前端的MVC框架。
它的Model Controller V 层需要application统一来管理，而application又是由HTML/JSP/PHP管理的。
最右边就是官方的文档目录结构。
下面看看例子中的目录结构：
app.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled:true //必须设置这个自动加载
});
Ext.application({
name : 'AM',//应用的名字
appFolder : "app",//应用的目录
launch:function(){//当前页面加载完成执行的函数
Ext.create('Ext.container.Viewport', { //简单创建一个视图
layout:'auto',//自动填充布局
items: { //初始化的内容
xtype: 'userlist', //View层的内容
title: 'Users',
html : 'List of users will go here'
}
});
},
controllers:[ //app要想将model,store联合起来，必须用一个联合器
'Users'
]
});
})
contraller下面的User.js
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)
}
}
},
"userlist actioncolumn[id=delete]":{ //这个地方是响应delete的那个删除事件
click : function(o,item,rowIndex,colIndex ,e){
alert(rowIndex+" "+colIndex);
}
}
});
},
views:[
'List'
],
stores :[
"Users"
],
models :[
"User"
]
});
Model下面的：User.js
//User类
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string',sortable : true},
{name: 'age', type: 'int',sortable : true},
{name: 'email', type: 'string',sortable : true}
]
});
Store包下面的Users.js
//User数据集合
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store', //User继承了一个类
model: 'AM.model.User', //这里必须配置一个model
storeId: 's_user',
proxy:{
type:'ajax',
url:'/extjs/extjs!getUserList.action',
reader: {
type: 'json',
root: 'topics'
},writer:{
type:'json'
}
},
autoLoad: true //很关键
});
View包下面的List.js
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist', //加一个别名：这样就可以在application中运用，写这个别名就OK了
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', //根据Users类自动找数据
dock:'bottom', //位置
displayInfo:true
}],
plugins:[ //可编辑的插件
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2
})
],
selType:'checkboxmodel',//设定选择模式
multiSelect:true,//运行多选
store : 'Users', //会自动找到文件里面的一个Users类
initComponent:function(){ //因为是一个继承的类，所以需要这个方法
this.callParent(arguments); //回调父类的构造方法
}
});
然后看看.html或者JSP的内容：
<!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>EXTJS4.0</title>
<!-- 导入Ext JS必需的CSS样式单 -->
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<!-- 导入Ext JS必需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-all.js">
</script>
<!-- 导入Ext JS国际化所需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js">
</script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="gridDemo"></div>
</body>
</html>