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="">

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

  1. 【原】谈谈对Objective-C中代理模式的误解

    [原]谈谈对Objective-C中代理模式的误解 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这篇文章主要是对代理模式和委托模式进行了对比,个人认为Objective ...

  2. 彻底理解AC多模式匹配算法

    (本文尤其适合遍览网上的讲解而仍百思不得姐的同学) 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符,表示状态的转移.根节点状态记为0状态,表示起 ...

  3. 制作类似ThinkPHP框架中的PATHINFO模式功能

    一.PATHINFO功能简述 搞PHP的都知道ThinkPHP是一个免费开源的轻量级PHP框架,虽说轻量但它的功能却很强大.这也是我接触学习的第一个框架.TP框架中的URL默认模式即是PathInfo ...

  4. MVVM模式解析和在WPF中的实现（六） 用依赖注入的方式配置ViewModel并注册消息

    MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...

  5. MVVM模式解析和在WPF中的实现（五）View和ViewModel的通信

    MVVM模式解析和在WPF中的实现(五) View和ViewModel的通信 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 M ...

  6. MVVM模式解析和在WPF中的实现（三）命令绑定

    MVVM模式解析和在WPF中的实现(三) 命令绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  7. MVVM模式和在WPF中的实现（二）数据绑定

    MVVM模式解析和在WPF中的实现(二) 数据绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  8. MVVM模式和在WPF中的实现（一）MVVM模式简介

    MVVM模式解析和在WPF中的实现(一) MVVM模式简介 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在 ...

  9. Microservice架构模式简介

    在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...

随机推荐

  1. SRM 582 Div II Level Two SpaceWarDiv2

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12556 #include <iostream> # ...

  2. Android - 设置adb的usb连接配置

    设置adb的usb连接配置 本文地址: http://blog.csdn.net/caroline_wendy 把须要測试的手机连接入电脑.通过系统查找USB连接配置,找到厂商ID: 把ID加入进ad ...

  3. JQuery Ajax实例总结

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  4. 人人网javascript面试题

    JavaScript面试题要求:以下题目必须从一至四题中,选出三道题,使用原生代码实现,不可使用任何框架,第五题为选作题. 一.  在页面的固定区域内实现图片的展示       <ignore_ ...

  5. SSH反向连接让外网也可远程访问内网机器

    最近把树莓派折腾了一番,放在了家里,但是家里是内网,出门在外,不方便直接ssh上来,于是请教了秦兄,指点迷津,发现SSH反向链接可以实现这个功能. 1. ssh反向链接的概念 A主机:外网,ip:11 ...

  6. 多校 4686 Arc of Dream hdu 矩阵解

    构造矩阵如下: Ai*bi AX*BX AX*BY AY*BX AY*BY 0 a(i-1)*b(i-1) Ai 0 AX 0 AY 0 a(i-1) Bi 0 0 BX BY 0 b(i-1) 1 ...

  7. 深入研究Clang（四） Clang编译器的简单分析

    作者:史宁宁(snsn1984) 首先我们确定下Clang编译器的详细内容和涵盖范围.之前在<LLVM每日谈之二十 Everything && Clang driver>中 ...

  8. VC实现文件拖拽OnDropFiles

    文章转自http://blog.csdn.net/zamaolangzi/article/details/5645284 使用过QQ的人都知道,只要把文件拖拽到消息框中就可以传送文件了.那么这种功能是 ...

  9. Unable to instantiate activity ComponentInfo或java.lang.ClassNotFoundException: com.ibright.herolegen

    不知道怎么回事,在libs中添加了jar包后,无法给jar包附加上源码,于是采取以下措施: 删除自动生成的依赖: 在Android Dependences目录上右击->Build Path -& ...

  10. 显示形状回归算法（ESR）代码介绍

    源地址:http://www.thinkface.cn/thread-3704-1-6.html 人脸对齐包括两个部分,分别为训练部分和测试部分.所有的代码基于opencv2.0.(一)训练阶段Ste ...