简单说明

Form.js  //可视控件类

Model.js //控件的模型类

Controller.js //控件的控制类

Form.js

Ext.define('application.view.mvvm.Form', {	extend : 'Ext.form.Panel',	xtype : 'mvvm-form',	viewModel : 'mvvm-model',	controller : 'mvvm-controller',	title : 'MVVM Form',	bodyPadding : 5,	layout : 'vbox',	defaults : {		anchor : '100%',		labelAlign : 'right',		allowBlank : false	},	defaultType : 'textfield',	items : [{		name : 'name',		bind : {			fieldLabel : '{name}'		}	}, {		name : 'age',		bind : {			fieldLabel : '{age}'		}	}],	buttons : [{		text : 'Reset',		handler : 'ResetForm'	}, {		text : 'Save',		handler : 'SaveForm'	}]})

Model.js

Ext.define('application.view.mvvm.Model', {	extend : 'Ext.app.ViewModel',	alias : 'viewmodel.mvvm-model',	data : {		name : "Name",		age : "Age"	}})

Controller.js

Ext.define('application.view.mvvm.Controller', {	extend : 'Ext.app.ViewController',	alias : 'controller.mvvm-controller',	SaveForm : function(button, e) {		Ext.Msg.alert('Message', Ext.JSON.encode(this.getView().getValues()));	},	ResetForm : function(button, e) {		this.getView().reset();	}})

界面