2.Ext JS MVVM特性

简单说明

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();
	}
})

界面