这段代码展示了如何在ExtJS中定义一个名为`User`的数据模型，它继承自`Ext.data.Model`，并配置了读取和更新数据的API。同时，定义了一个视图控制器`MyViewController`，包含了加载和保存用户数据的方法。`MyViewModel`链接到用户模型，并在表单中绑定了`name`字段。最后，创建了一个包含加载和保存按钮的表单，实现了用户数据的交互操作。
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id','name'],
proxy: {
type: 'ajax',
api: {
read: 'read.json',
update: 'update.json'
}
}
});
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myvc',
onUserLoad: function(btn, e, eOpts) {
this.getViewModel().linkTo('user', {
type: 'User',
id: 0
})
},
onUserSave: function(btn, e, eOpts) {
this.getViewModel().get('user').save({
callback: function(record) {
console.log( record )
}
})
}
})
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myvm',
});
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
bodyPadding: 10,
title: 'My Form',
controller: 'myvc',
viewModel: {
type: 'myvm'
},
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
bind: '{user.name}'
}],
tbar: [{
text: 'Load a User',
handler: 'onUserLoad'
}],
bbar: [{
text: 'Save',
handler: 'onUserSave'
}]
})
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('MyForm', {
renderTo: document.body,
width: 400
})
}
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
