准备整理一下公司ExtJs框架,先做点技术准备,下面对Ext官方MVC做一个源码分析:
效果如上图。
目录结构如下:
源码分析:
设置入口:app.js
Ext.application({
name: 'AM', //设定命名空间
// automatically create an instance of AM.view.Viewport
autoCreateViewport: true,
controllers: [ // 设定控制器
'Users'
]
});
找到controllers:
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: ['Users'], // generate getter methods
models: ['User'],
views: ['user.Edit','user.List'], // generate getter methods
refs: [{
ref: 'userlist', // generate getter methods
selector: 'userlist' // 选择器
// forceCreate : true // 每次访问都创建新对象
// autoCreate :true // 如果在页面中找不到该组件自动创建
// xtype: 'userlist'
}],
init: function() { // 出事化方法
this.control({ // 监听对象的事件
'userlist': {
itemdblclick: this.editUser
},
'useredit button[action=save]': {
click: this.updateUser
}
});
},
editUser: function(grid, record) {
var edit = Ext.create('AM.view.user.Edit').show();
edit.down('form').loadRecord(record);
console.log(this.getUserlist()); // 调用refs中设定的方法
console.log(Ext.ComponentQuery.query('userlist[refs=ul-refs]')[0].title);// 同上一句
},
updateUser: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(), // return Model
values = form.getValues();
console.log(values) // values为Object对象
record.set(values);//model.set(fieldName,newValue) fieldName为Object以键值对赋值
win.close();
console.log(this.getStore("Users"));
this.getUsersStore().sync(); // 同步store的proxy
}
});
关键研究一下views:
Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.useredit',
//requires: ['Ext.form.Panel'], // 默认引入的
title : 'Edit User',
layout: 'fit',
autoShow: true,
width: 280,
initComponent: function() { // 初始化
this.items = [{
xtype: 'form', // 实例化
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',
items: [{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}]
}];
this.buttons = [{
text: 'Save',
action: 'save'
},{
text: 'Cancel',
scope: this,
handler: this.close
}];
this.callParent(arguments); // 先调用父类的参数
}
});
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
refs: 'ul-refs', // 自定义标志,方便查找本对象
title : 'All Users',
store: 'Users',
columns: [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
]
});
非常简单,这里使用grid控件,store用Users,读取字段由columns决定。在controller中监听userlist,双击弹出useredit;controller中还监听useredit中action=save的按钮,触发保存数据的方法。
对于model和store都是比较固定的写法,这里就不多赘余啦。。。