extjs_11_mvc模式
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模式的更多相关文章
- 【原】谈谈对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 ...
随机推荐
- Swift - 跑酷游戏开发（SpriteKit游戏开发）
一,下面演示了如何开发一个跑酷游戏,实现的功能如下: 1,平台工厂会不断地生成平台,并且向左移动.当平台移出游戏场景时就可将其移除. 2,生成的平台宽度随机,高度随机.同时短平台踩踏的时候会下落. 3 ...
- 电驴 emule 源代码分析 (1)
关于电驴emule 的源代码,网上有一个 叫刘刚的人 分析的 非常多,可是假设你仅仅是看别人的分析,自己没有亲身去阅读代码的话,恐怕非常难 剖析整个系统. 关于emule 主要就是 连接 kad ...
- Boost Thread学习笔记
thread自然是boost::thread库的主 角,但thread类的实现总体上是比较简单的,前面已经说过,thread只是一个跨平台的线程封装库,其中按照所使用的编译选项的不同,分别决定使用 W ...
- [置顶] Java字节码文件剖析
Java为什么能够支持跨平台,其实关键就是在于其*.class字节码文件,因为*.class字节码文件有一个统一标准的规范,里面是JVM运行的时需要的相关指令,各家的JVM必须能够解释编译执行标准字节 ...
- WebBrowser脚本错误的完美解决方案
原文:WebBrowser脚本错误的完美解决方案 当IE浏览器遇到脚本错误时浏览器,左下角会出现一个黄色图标,点击可以查看脚本错误的详细信息,并不会有弹出的错误信息框.当我们使用WebBrowse ...
- 默认情况下，不使用of子句表示在select所有的数据表中加锁(转)
Select …forupdate语句是我们经常使用手工加锁语句.通常情况下,select语句是不会对数据加锁,妨碍影响其他的DML和DDL操作.同时,在多版本一致读机制的支持下,select语句也不 ...
- Processing.js
Processing.js Processing.js 1.4.1 released!
- mysql 主从同步出问题，重新修复从库 - web架构研究
mysql 主从同步出问题,重新修复从库 - web架构研究 mysql 主从同步出问题,重新修复从库 0 昨天由于操作失误,在从库上执行一堆sql之后,导致主从同步错误,并且已 ...
- Swift - 图像控件（UIImageView）的用法
1,使用图像控件显示图片 1 2 3 var imageView=UIImageView(image:UIImage(named:"icon")) imageView.frame= ...
- QSqlDatabase::addDatabase第一次运行的时候，生成SQLite文件的同时会产生一个默认连接
QSqlDatabase::addDatabase第一次运行的时候,生成SQLite文件的同时会产生一个默认连接: QSqlDatabase database = QSqlDatabase::addD ...