ExtJS5学习之MVVC

lxwt909

浏览: 572334 次
性别:
来自: 北京

最近访客更多访客>>

akingde

chenghu209

14252316

yinxin2745154

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

ExtJS5

MVVC模式并不是ExtJS首先提出的，其实ExtJS也是模仿微软的WPF中应用的MVVC设计模式。ExtJS在4.0时引入了MVC模式，在5.0时代又引入了MVVC模式。MVC模式对于大家来说应该不陌生了，MVVC是什么？要理解MVVC还是必须先了解MVC是什么？先来张MVC的结构图感受下：

MVC是一种用来更好组织架构软件的设计模式，它把应用程序划分为3部分，各部分各司其责。

Model：是用来表示应用程序中需要用到的数据，当然Model层中也可以包含业务逻辑和数据验证规则，以及其他各种功能接口。

View：是用来展示数据给最终用户的视图，不同的视图可能会以不同的方式展示相同的数据给用户，比如图表和表格都可以用来展示数据。

Controller:它是应用程序的控制中心，它监听着应用程序中的各种事件，代理处理Model和View之间的各种命令。比如Model中数据改变了，需要通过Controller来改变View。

那什么是MVVC呢？MVVC其实是基于MVC设计模式的一种延伸，它与MVC最关键的不同点在于它引入了ViewModel概念，ViewModel提供了Model和View之间的数据绑定，至于数据(Model)更新到视图(View)则是通过ViewController来完成。来张图感受下

文字太抽象，还是来点代码更形象，有助于理解。

打开Eclipse,新建一个Web project,准备采用最新的MVVC设计模式来编写一个ExtJS5的Grid和Form的数据双向绑定的demo

如图导入ExtJS5

如果主题皮肤文件不知道怎么导入的话，请查看我的第一篇博文《ExtJS5学习之Hello World篇》
开发环境搭好了，开始编写测试代码

请如图搭好项目结构
首先需要定义一个Application类，当然也可以不用定义，直接Ext.application({name: "appName"});这样写其实就是让ExtJS默认帮我们new一个Application实例，这里说的定义一个Application类其实就是继承ExtJS的Ext.app.Application类，进行一些我们自定义配置来覆盖默认配置，默认配置其实也是可以在Ext.application()创建application实例的运行时去覆盖的，但为了迎合面向对象的开发思想，还是定义一个Application类装装逼吧，显得高大上点。

Application.js

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    autoCreateViewport: true,
    enableQuickTips: true,
    
    launch: function () {
    	
    }
});

Ext.define()定义一个类，类似于Java里的public class XXXX，
extend：继承，你懂的

autoCreateViewport即自动帮我们创建ViewPort画布，autoCreateViewport的详细用法，我第一篇博客有详细说明，这里就不累赘了。

enableQuickTips: true 表示启用气泡提示，比如表单验证时，在文本框旁边用气泡方式显示提示信息。

在ExtJS3.x时代，只能这样写Ext.QuickTips.init();来启用，当然ExtJS5.x还是两种写法都兼容的，怎么写看各自喜好，建议采用新的写法，以免在API升级过程中旧的用法会被抛弃。

autoCreateViewport自动创建Viewport,所以我们得定义一个Viewport,

app/view/Viewport.js

/*********************全局视图容器类************************/
Ext.define("MyApp.view.Viewport",{
    extend:'Ext.container.Viewport',
    requires:['Ext.container.Viewport','MyApp.view.MainPanel'],
    alias : 'widget.baseviewport',
    alternateClassName: ["MyApp.Viewport"],
    layout: 'fit',
    loadMask:{msg : '正在加载，请稍候...'},
    items: [
    	{
    		xtype: 'mainpanel'
    	}
    ]
});

viewport容器里就放了一个mainpanel,mainpanel是别名，下面继续定义一个MainPanel类

app/view/MainPanel.js

Ext.define("MyApp.view.MainPanel", {
	extend:'Ext.panel.Panel',
    alias : 'widget.mainpanel',
    alternateClassName: ["MyApp.MainPanel"],
    requires: [  
        "Ext.layout.container.Fit",
        "MyApp.controller.PersonController",
        "MyApp.viewmodel.PersonViewModel",
        "MyApp.view.PersonGridPanel",
        "MyApp.view.PersonFormPanel"
    ],
    layout: 'hbox',
    border: 0,
    defaults: {
    	flex: 1
    },
    controller: "personController",
    viewModel: {
    	type: "personViewModel"
    },
    initComponent: function () {
        var me = this;
        me.items = [
            {
            	xtype: "personGridPanel"
            },
            {
            	xtype: "personFormPanel"
            }
        ];
        me.callParent(arguments);
    }
});

MainPanel里采用hbox水平布局，即从左到右这样水平摆放，里面放了两个子组件，personGridPanel和personFormPanel,即左边一个Grid表格右边一个FormPanel表单。

requires即导入当前类依赖的其他类，跟Java里的import导包差不多的意思。

controller:这个配置是5.x的MVVC模式里新引入的，其实就是MVC模式里的Controller,只不过这里的Controller的父类不再是Ext.app.Controller,变成了Ext.app.ViewController,
viewModel即当前视图的viewModel实例是什么，viewModel的参数值可以是viewMode的别名字符串，也可以是ViewModel带完整命名空间的类路径的字符串形式，也可以是viewModel的配置实例对象，比如我代码里写的那样，personViewModel是ViewModel类的别名。

app/view/PersonGridPanel.js

Ext.define("MyApp.view.PersonGridPanel",{
    extend:'Ext.grid.Panel',
    requires:[
        "Ext.grid.plugin.CellEditing",
        "MyApp.controller.PersonController",
        "MyApp.viewmodel.PersonViewModel",
        "MyApp.store.PersonStore"
    ],
    alias : 'widget.personGridPanel',
    alternateClassName: ["MyApp.personGridPanel"],
    uses: [
        "Ext.form.field.Text",
        "Ext.form.field.Number"
    ],
    plugins: [
        {
        	ptype: "cellediting",
        	clickToEdit: 2,
        	pluginId: "cellediting"
        }        
    ],
    publishes: ["currentPerson"],
    bind : {
    	currentPerson: "{currentPerson}",
    	store: "{personStore}",
    	title: "<strong>{currentPerson.personName}</strong>"
	},
	config: {
		currentPerson: null
	},
    controller: "personController",
    viewModel: {
    	type: "personViewModel"
    },
	listeners: {
		scope: "this",
		select: "onPersonSelect"
	},
	
	/**表格标题行**/
	header: {
	    title: "Person Grid",
	    padding: "4 9 5 9",
	    items: [
	        {
	        	text: "添加",
	        	xtype: "button",
	        	itemId: "add",
	        	handler: "onGridButtonClick"
	        },
	        {
	        	text: "撤消",
	        	xtype: "button",
	        	itemId: "reject",
	        	handler: "onGridButtonClick",
	        	tooltip: "撤消重填",
	        	disabled: true,
	        	margin: "0 0 0 15",
	        	bind: {
	        		disabled: "{!storeDirty}"
	        	}
	        },
	        {
	        	text: "提交",
	        	xtype: "button",
	        	itemId: "commit",
	        	handler: "onGridButtonClick",
	        	tooltip: "提交",
	        	disabled: true,
	        	margin: "0 0 0 15",
	        	bind: {
	        		disabled: "{!storeDirty}"
	        	}
	        }
	    ]
	},
	/**表格列头*/
	columns:[
	    {
	    	text: "姓名",
	    	width: "50%",
	    	dataIndex: "personName",
	    	editor: {
	    		xtype: "textfield",
	    		bind: "{currentPerson.personName}"
	    	}
	    },
	    {
	    	text: "年龄",
	    	width: 340,
	    	dataIndex: "age",
	    	editor: {
	    		xtype: "textfield",
	    		bind: "{currentPerson.age}"
	    	}
	    }
	],
	
	
	onPersonSelect: function(grid,person) {
		this.setCurrentPerson(person);
		var formPanel = Ext.ComponentQuery.query('personFormPanel')[0];
		formPanel.setCurrentPerson(person);
		
	},
	updateCurrentPerson: function(current,previous) {
		var sm = this.getSelectionModel();
		if(current) {
			sm.select(current);
		}
		if(previous) {
			sm.deselect(previous);
		}
	},
});

personGridPanel里代码关键点就几处，我一一说明

bind：即数据绑定，把Model数据绑以key-value形式暴露出去，view视图里可以采用{key}

这种表达式来引用Model里的数据。

config：就是把在这里定义的属性自动生成get/set函数，也就是说如果你类里面需要生成get/set函数的属性可以放到config里定义，extjs会自动帮你生成get/set,这个特性在ExtJS4.x时代就有了。

controller：即当前视图的controller是谁，同理这里可以配置成controller类的别名也可以是controller类包含完整命令空间的类路径字符串。不过要记住的是，在MVVC模式里，controller都指的是Ext.app.ViewController,不再是Ext.app.Controller.

ViewModel：即MVVC中的第二个V,ExtJS5.x里的数据双向绑定就是依赖ViewModel，
app/viewmodel/PersonViewModel.js

Ext.define("MyApp.viewmodel.PersonViewModel", {
    extend : "Ext.app.ViewModel",
    alias: "viewmodel.personViewModel",
    requires:[
        "MyApp.store.PersonStore",
        "MyApp.model.PersonModel"
    ],
    data: {
    	currentPerson: null
    },
    formulas: {
        dirty: {
            bind: {
                bindTo: "{currentPerson}",
                deep: true
            },
            get: function(data) {
            	console.log(data);
                return data ? data.dirty : false;
            }
        },
        storeDirty: {
            bind: {
                bindTo: "{currentPerson}",
                deep: true
            },
            get: function() {
                return this.getStore("personStore").isDirty();
            }
        }
    },
    stores: {
        personStore: {
        	type: "personStore"
        }
    }
});

viewModel的关键点就是data,stores,

data即当前时刻Model的数据

stores即定义数据源，可以定义多个数据源，personStore数据源的引用别名，可以通过grid.getStore("store引用名")来获取这里的数据源，后面的type是PersonStore定义的别名，即表示这里的Store是哪个类的实例。如果有多个store你可以这样：
stores: {
aaa: {type: ""xx.xxxx.AA""},

bbb: {type: ""xx.xxxx.BB""}

}

外部通过getStore("aa"),getStore("bb")这样来获取Store对象，后面的xx.xxx.AA是Store类的完整类路径(包含命名空间)

至于formulas是里定义的是一些函数用于绑定按钮禁用状态。

app/view/PersonFormPanel.js

Ext.define("MyApp.view.PersonFormPanel", {
	extend: "Ext.form.Panel",
	alias: "widget.personFormPanel",
	requires: [
	    "Ext.form.field.Number",
        "MyApp.controller.PersonController",
        "MyApp.viewmodel.PersonViewModel"
	],
	controller: "personController",
	viewModel: {
		type: "personViewModel"
	},
    publishes: ["currentPerson"],
	/**自动生成get/set*/
	config: {
	    currentPerson: null
	},

	bind : {
    	currentPerson: "{currentPerson}",
    	title: "<strong>{currentPerson.personName}</strong>"
	},
	bodyPadding: 10,
	defaultType: "textfield",
	defaults: {
		anchor: "100%",
		selectOnFocus: true
	},
	header: {
	    title: "Person Form",
	    padding: "4 9 5 9",
	    items: [
	        {
	        	text: "撤消",
	        	xtype: "button",
	        	itemId: "reject",
	        	handler: "onFormButtonClick",
	        	tooltip: "撤消重填",
	        	disabled: true,
	        	margin: "0 0 0 15",
	        	bind: {
	        		disabled: "{!dirty}"
	        	}
	        },
	        {
	        	text: "提交",
	        	xtype: "button",
	        	itemId: "commit",
	        	handler: "onFormButtonClick",
	        	tooltip: "提交",
	        	disabled: true,
	        	margin: "0 0 0 15",
	        	bind: {
	        		disabled: "{!dirty}"
	        	}
	        }
	    ]
	},
	items: [
		{
			name: "id",
			hidden: true,
			fieldLabel: "",
			bind: {
				value: "{currentPerson.id}"
			}
		},
	    {
	    	fieldLabel: "姓名",
	    	//disabled: true,
	    	bind: {
	    		value: "{currentPerson.personName}",
	    		disabled: "{!currentPerson}"
	    	}
	    },
	    {
	    	fieldLabel: "年龄",
	    	//disabled: true,
	    	bind: {
	    		value: "{currentPerson.age}",
	    		disabled: "{!currentPerson}"
	    	}
	    }
    ],
    height: 310
});

PersonFormPanel和PersonGridPanel代码差不多，唯一就是Grid需要绑定Store数据源。

app/store/PersonStore.js

Ext.define("MyApp.store.PersonStore", {
    extend : "Ext.data.Store",
    requires: ["MyApp.model.PersonModel"],
    model: 'MyApp.model.PersonModel',
    alias: "store.personStore",
    storeId: "personStore",
    pageSize: 10,
    proxy: {
        type: 'ajax',
        url: MyApp.util.AppUtil.basePath + 'person.json',
        reader: { rootProperty: 'items', totalProperty: 'total' }
    },
    reader: {type: 'json'},
    sorters: [{
        property: 'id',
        direction: 'asc'
    }],
    autoLoad: true,
    isDirty: function() {
    	var dirty = this.getModifiedRecords().length;
    	dirty = dirty || this.getNewRecords().length;
    	dirty = dirty || this.getRemovedRecords().length;
    	return !!dirty;
    }
});

Store就没有什么好说的，关键点就是配置Model类和proxy，proxy数据代理那里我为了简便起见，就没有编写访问数据库代码了，而仅仅是访问一个json文件，store需要的数据都以json字符串的形式定义在person.json文件里。Store是依赖于Model的，所以requires里需要引入PersonModel类。

下面贴出person.json里定义的测试数据：

webContent\person.json

{
    "total": 12,
    "items": [
        {
        	"id": 1,
            "personName": "益达1",
            "age": 28
        },
        {
        	"id": 2,
            "personName": "益达2",
            "age": 28
        },
        {
        	"id": 3,
            "personName": "益达3",
            "age": 28
        },
        {
        	"id": 4,
            "personName": "益达4",
            "age": 28
        },
        {
        	"id": 5,
            "personName": "益达5",
            "age": 28
        },
        {
        	"id": 6,
            "personName": "益达6",
            "age": 28
        },{
        	"id": 7,
            "personName": "益达7",
            "age": 28
        },
        {
        	"id": 8,
            "personName": "益达8",
            "age": 28
        },
        {
        	"id": 9,
            "personName": "益达9",
            "age": 28
        },
        {
        	"id": 10,
            "personName": "益达10",
            "age": 28
        },
        {
        	"id": 11,
            "personName": "益达11",
            "age": 28
        },
        {
        	"id": 12,
            "personName": "益达12",
            "age": 28
        }
    ]
}

PersonModel就是一个普通实体类，就好比Java里的一个普通的JavaBean,仅仅是一些类属性声明；

app/model/PersonModel.js

Ext.define("MyApp.model.PersonModel", {
    extend : "Ext.data.Model",  
    fields : [
    	{name: 'id', type: 'int'},
	    {name: 'personName', type: 'string'},
	    {name: 'age', type: 'int'}
    ]
});

编写app.js来创建ExtJS的Application实例对象来运行我们的应用程序，这个文件存放路径没有什么规范约束，不像MVVC模式那样，controller类必须放controller目录下，Store类必须放store目录下。

webContent\app.js

Ext.Loader.setConfig({
	enabled : true
});
Ext.Loader.setPath({
	'Ext.ux' : 'extjs/ux',
	'MyApp.util' : 'app/util'
});

/**
 * 加载ExtJS插件文件
 */
Ext.require(
	[
		'Ext.ux.PageSizePaging',
		'MyApp.util.AppUtil'
	]
);
Ext.application({
    requires: ['Ext.container.Viewport','MyApp.view.Viewport'],
    //项目名称简称
    name: 'MyApp',
    appFolder: 'app',
    autoCreateViewport: true,
    
    launch: function () {
    	//Ext.create('MyApp.view.Viewport');
    }
});

OK，最后新建一个JSP页面，测试一把，就完事儿了。

webContent\index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basePath", basePath);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>ExtJS5-MVVC设计模式学习</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!-- 加载ExtJS5  默认的经典蓝主题皮肤样式文件 -->
	<link href="${basePath}extjs/theme/ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="${basePath}extjs/bootstrap.js"></script>
	<script type="text/javascript" src="${basePath}extjs/ext-locale-zh_CN.js"></script>
	<script type="text/javascript" src="${basePath}app.js"></script> 
	
  </head>
  
  <body>
      
  </body>
</html>

启动tomcat部署我们的测试项目，如图