1.非mvc模式

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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模式

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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模式的更多相关文章

【原】谈谈对Objective-C中代理模式的误解
[原]谈谈对Objective-C中代理模式的误解本文转载请注明出处 —— polobymulberry-博客园 1. 前言这篇文章主要是对代理模式和委托模式进行了对比,个人认为Objective ...
彻底理解AC多模式匹配算法
(本文尤其适合遍览网上的讲解而仍百思不得姐的同学) 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符,表示状态的转移.根节点状态记为0状态,表示起 ...
制作类似ThinkPHP框架中的PATHINFO模式功能
一.PATHINFO功能简述搞PHP的都知道ThinkPHP是一个免费开源的轻量级PHP框架,虽说轻量但它的功能却很强大.这也是我接触学习的第一个框架.TP框架中的URL默认模式即是PathInfo ...
MVVM模式解析和在WPF中的实现（六）用依赖注入的方式配置ViewModel并注册消息
MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...
MVVM模式解析和在WPF中的实现（五）View和ViewModel的通信
MVVM模式解析和在WPF中的实现(五) View和ViewModel的通信系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 M ...
MVVM模式解析和在WPF中的实现（三）命令绑定
MVVM模式解析和在WPF中的实现(三) 命令绑定系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
MVVM模式和在WPF中的实现（二）数据绑定
MVVM模式解析和在WPF中的实现(二) 数据绑定系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
MVVM模式和在WPF中的实现（一）MVVM模式简介
MVVM模式解析和在WPF中的实现(一) MVVM模式简介系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在 ...
Microservice架构模式简介
在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...

随机推荐

[置顶] 无名管道的C++封装
xpipe-无名管道的C++封装类无名管道的C++封装类,用于父子进程进行通信基础介绍 unix下一切皆文件,管道也不例外.无名管道pipe定义在<unistd.h>中. #inclu ...
Oracle表连接总结
1 简述 1) 两个表的连接,是通过将一个表中的一列或者多列同另一个表中的列链接而建立起来的.用来连接两张表的表达式组成了连接条件.当连接成功后,第二张表中的数据就同第一张表连接起来了,并形成了复合结 ...
Oracle 排序规则
<pre name="code" class="html">SQL> select * from t1 where id>=1 and ...
Hadoop大数据零基础高端实战培训系列配文本挖掘项目
nginx的反向代理和负载均衡的区别是什么 - 开源中国社区
nginx的反向代理和负载均衡的区别是什么 - 开源中国社区 nginx的反向代理和负载均衡的区别是什么 #user nobody;worker_processes 1;#error_log ...
SMART rule之个人理解
SMART原则通常应用于绩效评估中. S是specific的缩写,也就是你所设定的目标必须是一个具体的目标,而不是一个空而大的东西. 比如你的目标定位为今年学习linux,并对进程管理.内存管理等要能 ...
UVA 311 Packets 贪心+模拟
题意:有6种箱子,1x1 2x2 3x3 4x4 5x5 6x6,已知每种箱子的数量,要用6x6的箱子把全部箱子都装进去,问需要几个. 一开始以为能箱子套箱子,原来不是... 装箱规则:可以把箱子都看 ...
c++在string类源
一:回想 (1)c++中的string类是在面试中和笔试中常常考的题目: project代码免费下载 string类的自行实现 (2)c++中的string类和fstream类合起来是处理外部数据的利 ...
【ASP.NET Web API教程】5.1 HTTP消息处理器
原文:[ASP.NET Web API教程]5.1 HTTP消息处理器注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内容. 5.1 HTTP ...
[读书笔记]设计原本[The Design of Design]
第1章设计之命题 1.设计首先诞生于脑海里,再慢慢逐步成形(实现) 2.好的设计具有概念完整性:统一.经济.清晰.优雅.利落.漂亮... 第2章工程师怎样进行设计思维——理性模型 1.有序模型的有 ...

extjs_11_mvc模式

1.非mvc模式

2.mvc模式

extjs_11_mvc模式的更多相关文章

随机推荐

热门专题