extjs_11_mvc模式

2022-10-15 16:52:38

1.非mvc模式

grid.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP "index.jsp" starting page</title>

<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
	Ext.onReady(function() {
		// 自定义数据模型
		var jsonpModel = Ext.define("jsonpModel", {
			extend : "Ext.data.Model",
			fields : [ {
				name : "userid",
				type : "string"
			}, {
				name : "username",
				type : "string"
			}, {
				name : "dateline",
				type : "string"
			}, {
				name : "title",
				type : "string"
			} ]
		});
		// 数据
		var myStore = Ext.create("Ext.data.Store", {
			model : "jsonpModel",
			pageSize : 10,//配置每页显示记录数
			proxy : {
				type : "jsonp",
				url : "http://www.sencha.com/forum/topics-browse-remote.php",
				reader : {
					totalProperty : "totalCount",
					root : "topics"
				}
			},
			autoLoad : true
		// 自动加载数据
		});

		// 表格
		var myGrid = new Ext.grid.Panel({
			columns : [ {
				xtype : "rownumberer",
				text : "行号",
				width : 30
			}, {
				text : "用户id",
				dataIndex : "userid"
			}, {
				text : "用户姓名",
				dataIndex : "username"
			}, {
				text : "时间线",
				dataIndex : "dateline"
			}, {
				text : "标题",
				dataIndex : "title"
			} ],
			store : myStore,
			bbar : {// 在表格底部 配置分页
				xtype : "pagingtoolbar",
				store : myStore,
				displayInfo : true
			}
		});

		// 窗口
		var window = Ext.create("Ext.window.Window", {
			title : "用户信息",
			width : 600,
			height : 400,
			items : myGrid,
			layout : "fit",
			tbar : {
				xtype : "toolbar",
				items : [ {
					xtype : "button",
					text : "新增",
					listeners : {
						"click" : function(btn) {
							Ext.Msg.alert("标题", "新增");
						}
					}
				}, {
					xtype : "button",
					text : "编辑",
					listeners : {
						"click" : function(btn) {
							Ext.Msg.alert("标题", "编辑");
						}
					}
				} ]
			}
		});
		window.show();
	});
</script>

</head>

<body>
	显示跨域jsonp数据
	<br>
</body>
</html>

2.mvc模式

UserController.js

Ext.define("core.user.controller.UserController", {
			extend : "Ext.app.Controller",
			refs : [{
						ref : 'userGrid',
						selector : 'usergrid'
					}],
			init : function() {
				var me = this;
				me.control({
							"usergrid button[ref=add]" : {
								click : me.doBtnClick
							},
							"usergrid button[ref=edit]" : {
								click : me.doBtnClick
							}
						});
			},
			doBtnClick : function(btn) {
				var grid = this.getUserGrid();
				Ext.Msg.alert("提示", "在面板【" + grid.title + "】 点击了【" + btn.text
								+ "】按钮");
			},
			stores : ["core.user.store.UserStore"],
			models : ["core.user.model.UserModel"],
			views : ["core.user.view.UserGrid"]
		})

UserModel.js

Ext.define("core.user.model.UserModel", {
			extend : "Ext.data.Model",
			fields : [{
						name : "userid",
						type : "string"
					}, {
						name : "username",
						type : "string"
					}, {
						name : "dateline",
						type : "string"
					}, {
						name : "title",
						type : "string"
					}]
		});

UserStore.js

Ext.define("core.user.store.UserStore", {
			extend : "Ext.data.Store",
			pageSize : 10,// 配置每页显示记录数
			model : "core.user.model.UserModel",
			proxy : {
				type : "jsonp",
				url : "http://www.sencha.com/forum/topics-browse-remote.php",
				reader : {
					totalProperty : "totalCount",
					root : "topics"
				}
			},
			autoLoad : true
		});

UserGrid.js

Ext.define("core.user.view.UserGrid", {
			extend : "Ext.grid.Panel",
			alias : "widget.usergrid",// 别名默认全部使用小写
			title : '用户信息',
			layout : 'fit',
			store : "core.user.store.UserStore",
			columns : [{
						xtype : "rownumberer",
						text : "行号",
						width : 30
					}, {
						text : "用户id",
						dataIndex : "userid"
					}, {
						text : "用户姓名",
						dataIndex : "username"
					}, {
						text : "时间线",
						dataIndex : "dateline"
					}, {
						text : "标题",
						dataIndex : "title"
					}],
			tbar : {// 顶部工具条
				xtype : "toolbar",
				items : [{
							xtype : "button",
							text : "新增",
							ref : "add"
						}, {
							xtype : "button",
							text : "编辑",
							ref : "edit"
						}]
			},
			bbar : {// 在表格底部 配置分页
				xtype : "pagingtoolbar",
				store : "core.user.store.UserStore",
				displayInfo : true
			},
			initComponent : function() {
				this.callParent(arguments);
			}
		})

mvc.js

Ext.onReady(function() {
			Ext.application({
						name : "core",
						appFolder : "core/coreApp",
						views : ["core.user.view.UserGrid"],
						controllers : ["core.user.controller.UserController"],
						launch : function() {
							var viewPort = Ext.create("Ext.container.Viewport",
									{
										layout : "fit",
										items : {
											xtype : "usergrid"
										}
									});
						}
					});
		});

mvc.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>extjs mvc</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css" />
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="./core/mvc.js"></script>

</head>

<body>
</body>
</html>

extjs_11_mvc模式,布布扣,bubuko.com

extjs_11_mvc模式

码农公寓

1.非mvc模式

2.mvc模式

相关文章