Extjs4 API文档阅读（二）——MVC构架(下)

一直想写一些Extjs4 MVC的东西，但由于自己的英文水平足够媲美小学5年纪的学生，所以在找了一些比我强一点的网友+机器翻译，总结出了以下这篇文章。但个人强烈建议去看英文原版（点击进入）。看完本文后，如有任何错误，欢迎来信或者留言指正(QQ:301109552)。

控制网格

要注意的是,onPanelRendered功能仍然是被调用的。这是因为gird匹配'viewport > panel'。
然后我们添加一个监听，当我们双击grid中的行，就可以编辑用户。

Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: ['user.List'],
init: function() {
        this.control({ 
            	'userlist': {
                itemdblclick: this.editUser 
            	}
        });
},
editUser: function(grid, record) { 
        console.log('Double clicked on ' +record.get('name'));
}
});

这里，我们修改了ComponentQuery的选择（'userlist'）和事件的名称（'itemdblclick'）和处理函数（'editUser'）。

如果要实现真正编辑用户，那么我们需要一个真正用于用户编辑window，接着，创建一个JS文件。其路径是：app/view/user/Edit.js，代码是这样的：

Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window', 
    alias : 'widget.useredit',
title : 'Edit User',
layout: 'fit', 
    autoShow: true,
initComponent: function() {
        this.items = [{
                xtype: 'form',
                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.window.Window，然后使用initComponent创建了一个表单和两个按钮，表单中，两个字段分别装载用户名和电子邮件。接下来，我们修改视图控制器，使其可以载入用户数据。

Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [ 
        'user.List',
    'user.Edit'
],
init: ... 
    editUser: function(grid, record) {
        var view = Ext.widget('useredit'); 
            view.down('form').loadRecord(record);
}
});

首先，我们创建的视图，使用便捷的方法Ext.widget，这是相当于Ext.create（'widget.useredit“）。然后我们利用ComponentQuery快速获取编辑用户的形式引用。在Ext JS4的每个组件有一个down函数，可以使用它快速的找到任何他的子组件。当双击Grid中的行，我们可以看到如下图所示：

创建Model 和 Store

编辑形式有了，接下来就是保存的实现了，在这之前，我们还需要一些修改。AM.view.user.List中使用initComponent创建了一个Store，但这并不能实现修改用，所以，我们修改几个文件，首先创建app/store/Users.js

Ext.define('AM.store.Users', {
extend: 'Ext.data.Store', 
    fields: ['name', 'email'],
data: [ 
        {name: 'Ed',    email: 'ed@sencha.com'}, 
        {name: 'Tommy', email: 'tommy@sencha.com'}
]
});

接下来修改两个文件：

Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller', 
    stores: [        'Users'    ],
    ...
});

修改app/view/user/List.js，使其引用Users

Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel', 
    alias : 'widget.userlist', 
    //we no longer define the Users store in the `initComponent` method 
    store: 'Users',    
...
});

现在，我们定义的用户控制器已经能顺利的加载数据了，到目前，我们所定义的Store已经足够使用了，但是Extjs4提供了一个强大的Ext.data.Model类，不如，我们利用它来重构下我们Store，创建app/model/User.js

Ext.define('AM.model.User', {
extend: 'Ext.data.Model', 
    fields: ['name', 'email']
});

创建好模型之后，我们将他引入用户控制：

//the Users controller will make sure that the User model is included on the page and available to our app 
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller', 
    stores: ['Users'],
models: ['User'],
...
}); 
// we now reference the Model instead of defining fields inline 
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store', 
    model: 'AM.model.User',
data: [ 
        {name: 'Ed',    email: 'ed@sencha.com'}, 
        {name: 'Tommy', email: 'tommy@sencha.com'}
]
});

完成上面的代码后，刷新页面，看到的结果和以前的一样。

保存数据

现在双击Grid中的行，会弹出编辑用户的window，实现Save来保存用户数据，我们需要修改init函数。

Ext.define('AM.controller.Users', {
init: function() {
        this.control({ 
            'viewport > userlist': { 
                itemdblclick: this.editUser 
        }, 
            'useredit button[action=save]': { 
                click: this.updateUser 
           }
      });
}, 
updateUser: function(button) { 
        console.log('clicked the Save button');
}
});

在this.control中，我们增加了一个选择项，'useredit button[action=save]'，当ComponentQuery找到符合的组件（button按钮，并且action动作为save），给他增加一个方法click，事件为updateUser。如图：

上图中，可以看到正确的Click事件，在updateUser函数中，需要一个正式的逻辑，来完成用户数据的更新。

updateUser: function(button) {
var win   = button.up('window'), 
        form   = win.down('form'),
    record = form.getRecord(), 
        values =form.getValues();
    record.set(values); 
   win.close();
}

这里，当我们点击Save按钮，我们将按钮本身传入函数updateUser，这时，我们使用button.up('window')来获取用户window的引用，然后使用win.down('form')来获取表单的引用，然后获取表单的记录，获取表单中的值，再设置记录为新的值，最后关闭window。
修改数据后点击Save，更新完成。

实际应用过程中，我们需要将数据保存到服务器，所以，需要修改文件，达到想要的目的。

将数据保存到服务器

这很容易做到。使用AJAX来实现即可。

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store', 
    	model: 'AM.model.User',
    autoLoad: true,
    proxy: {
        type: 'ajax', 
        	url: 'data/users.json',
        reader: {
            type: 'json', 
           root: 'users',
            successProperty: 'success'        
	}
    } 
});

在AM.store.Users，移除data，用一个代理（proxy）取代它，用代理的方式来加载和保存数据。在Extjs4中，代理的方式有AJAX, JSON-P 和 HTML5 localStorage，这里使用AJAX代理。数据从data/users.json中得到。

我们还用reader来解析数据，还指定了successProperty配置。具体请查看Json Reader，把以前的数据复制到users.json中。得到如下形式：

{    success: true,    users: [ 
        {id: 1, name: 'Ed',    email: 'ed@sencha.com'}, 
        {id: 2, name: 'Tommy', email: 'tommy@sencha.com'}   
 ]}

到这里，唯一的变化是将Stroe的autoLoad设置为了true，这要求Stroe的代理要自动加载数据，当刷新页面，将得到和之前一样的效果。

最后一件事情，是将修改的数据发送到服务器，对于本例，服务端只用了一个静态的JSON，所以我们不会看到有任何变化，但至少可以确定这样做是可行的，相信服务端处理数据能力，大家都应该有。本例用，做个小小的变化，即新的代理中，使用api来更新一个新的URL。

proxy: {
    type: 'ajax',
    api: {
        read: 'data/users.json', 
            update: 'data/updateUsers.json'
    }, 
   reader: {
        type: 'json', 
            root: 'users',
        successProperty: 'success'    
}
}

再来看看是如何运行的，我们还在读取users.json中的数据，而任何更新都将发送到updateUsers.json，在updateUsers.json中，创建一个虚拟的回应，从而让我们知道事件确实已经发生。updateUsers.json只包含了{"success": true}。而我们唯一要做的事情是服务的同步编辑。在updateUser函数增加这样一个功能。

updateUser: function(button) {
        var win    = button.up('window'), 
        form   = win.down('form'),
        record = form.getRecord(), 
        values = form.getValues();
record.set(values);
    win.close(); 
        this.getUsersStore().sync();
}

现在，运行这个完整的例子，当双击grid中的某一样并进行编辑，点击Save按钮后，得到正确的请求和回应。