extjs_11_mvc模式

来源：互联网发布：v meca 编程编辑：程序博客网时间：2024/05/16 07:20

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>

2 0