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

控制网格

要注意的是,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

 

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按钮后，得到正确的请求和回应。至此，整个MVC模式全部完成，下一节，将讨论控制器（Controller）和模式（patterns），而这些，可以使应用代码更少，更容易维护