ExtJs4 MVC分析simple - examples源码分析

准备整理一下公司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都是比较固定的写法，这里就不多赘余啦。。。