版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/53559482
简单说明
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();
}
})界面
