EXTJS三层架构MVC

最新推荐文章于 2023-04-10 23:08:18 发布

ItJavawfc

最新推荐文章于 2023-04-10 23:08:18 发布

阅读量1.5k

点赞数

文章标签： EXTJS三层架构MVC

本文链接：https://blog.csdn.net/ItJavawfc/article/details/39249375

版权

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>