首页 > 代码库 > extjs_11_mvc模式
extjs_11_mvc模式
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=http://www.mamicode.com/"./extjs4.1/resources/css/ext-all.css">>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.jsExt.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.jsExt.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.jsExt.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.jsExt.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=http://www.mamicode.com/"./extjs4.1/resources/css/ext-all.css" />>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。