ExtJS MVC结构

概述

大型的应用在开发和运维上都存在着困难。应用功能的调整和开发人员的调动都会影响对项目的掌控。ExtJS4带来了一种新的应用结构。这种结构不止用于组织代码,也能有效的减少必要的代码量。

这次ExtJS4的应用结构采用了MVC的形式。在这种形式下,Models和Controllers第一次被引入了ExtJS。目前已经有了许多MVC式的结构,这些结构大部分是大同小异。这里是我们定义的MVC结构:

  • Model(模型)是字段及数据的集合(比如一个用户模型包含用户名字段和密码字段)。模型用于数据的展示,也可以通过关联关系关联到其他的Model上。模型的工作形式很像ExtJS3的Record类,并通常和Stores一起使用将数据展示到grids和其他组件中;
  • View(视图)是组件的的一种类型。grids、trees和panels都是视图;
  • Controller(控制器)用于将代码组合起来使应用运行。

在这篇文章中我们将建立一个简单的用户数据管理应用。通过这个应用可以对ExtJS4的MVC结构有初步的了解。

ExtJS4的MVC结构提供了一套结构性和一致性的规范。在开发中会发现,Ext的MVC应用是由自定义类和框架代码构成的。按惯例,先说下采用MVC结构开发的好处:

  • 所有的应用采用相同的模式工作,只需要一次学习;
  • 所有的应用采用相同的模式工作,便于代码共享;
  • 可以基于ExtJS提供的开发工具进行开发优化。

 

文件结构

使用ExtJS的MVC模式开发应用需要使用统一的文件结构 。应用所有的类都放在app目录下。按MVC结构,在app目录下需要建立model、view、store和controller等子目录。下图为我们的一个示例应用开发完成后的目录结构:

Folder Structure

在这个例子中我们封装了一个应用程序称为“account_manager”,ExtJS4的sdk环境置于ext-4.0目录中。如下为index.html的代码:

   1:  <html>
   2:  <head>
   3:      <title>Account Manager</title>
   4:      <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
   5:      <script type="text/javascript" src="ext-4.0/ext-debug.js"></script>
   6:      <script type="text/javascript" src="app.js"></script>
   7:  </head>
   8:  <body></body>
   9:  </html>

 

从app.js开始创建应用

每个ExtJS4的MVC应用都是通过一个Appliaction类的实例启动。在Application中包含应用的全局定义(比如应用名称),以及应用中所使用到的模型、视图和控制器的引用。此外,Application类还有一个launch函数。launch函数在页面加载完成后执行。

接下来我们将创建一个account_manager应用来管理用户账户信息。首先需要为这个应用定义一个全局的命名空间。所有ExtJS4的MVC应用应该只有一个全局命名空间,应用中所有的类都置于这个命名空间下。一般我们会给这个命名空间定义一个较短的名称,这里我们使用“AM”。

   1:  Ext.application({
   2:      name: 'AM',
   3:   
   4:      appFolder: 'app',
   5:   
   6:      launch: function() {
   7:          Ext.create('Ext.container.Viewport',{
   8:              layout: 'fit',
   9:              items: [
  10:                  {
  11:                      xtype: 'panel',
  12:                      title: 'Users',
  13:                      html : 'List of users will go here'
  14:                  }
  15:              ]
  16:          });
  17:      }
  18:  });

这里实现的功能很简单。首先,我们调用 Ext.application创建了一个Application类的实例,并将之命名为“AM”。同时,这里自动创建了一个全局变量“AM”,并为Ext.Loader注册了一个命名空间。然后我们设置appFolder属性为app目录。最后我们设置了launch函数,并在函数中创建了包含一个panel的Viewport来填充整个屏幕。

Initial view with a simple Panel

定义一个控制器(controller)

可以说控制器(controller)是把整个应用绑定在一起的胶水。它们(控制器)执行的工作是事件监听(通常来自view)并做出相应处理。

我们继续完成account_manager应用,接下来我们将创建一个控制器。新建一个js文件app/controller/Users.js,代码如下:

   1:  Ext.define('AM.controller.Users',{
   2:      extend: 'Ext.app.Controller',
   3:   
   4:      init: function() {
   5:          console.log('Initialized Users! This happens before the Application launch function is called');
   6:      }
   7:  });

将我们新建的控制器Users添加到应用中,为app.js添加属性如下:

   1:  Ext.application({
   2:      ...
   3:   
   4:      controllers: [
   5:          'Users'
   6:      ],
   7:   
   8:      ...
   9:  });

当我们通过index.html在浏览器中加载应用时,控制器Users也会被自动加载(因为我们在上面的应用定义中做了设置),然后Users的init函数会被调用——在Application类的launch函数执行之前。

在控制器与视图(view)的交互中,init函数的作用十分重要,通常它会和控制器的另一个函数control一起使用。使用control函数比较容易实现对视图事件的监听和响应。

我们调整下Users控制器,通过control函数来看看panel什么时候被render(渲染):

   1:  Ext.define('AM.controller.Users',{
   2:      extend: 'Ext.app.Controller',
   3:   
   4:      init: function() {
   5:          this.control({
   6:              'viewport > panel': {
   7:                  render: this.onPanelRendered
   8:              }
   9:          });
  10:      },
  11:   
  12:      onPanelRendered: function() {
  13:          console.log('The panel was rendered');
  14:      }
  15:  });

在上面的代码中,我们调整了users控制器的init函数,使用this.control为应用中的视图建立了监听。control函数使用新的ComponentQuery引擎简单快速的实现了对页面上的组件的引用。(关于ComponentQuery的内容请参看文档。简单地说,就是使用css式的选择器实现了对页面上组件的快速匹配)。

在上面的init函数中我们使用了“viewport > panel”这样的语句。“viewport > panel”是一个选择器,它的含义是“找到Viewport的每个直接子Panel”。随后我们提供了一个对象,在这个对象中包含事件名称(上例中即是render)及相应的处理函数。实现的效果是任何一个匹配我们定义的选择器的组件触发了render事件后即会调用onPanelRendered函数。

现在运行下应用看看效果:

Controller listener

并不是一个很炫的应用,但它已经展示了使用MVC管理代码的好处。接下来我们给这个应用添加一个表格,使它变得丰满些。

 

定义一个视图

目前为止我们的应用只有两个文件、极少的几行代码。现在我们想给这个应用添加一个表格来展示系统中的用户。是时候使用视图了。

视图只是一个组件,是继承自ExtJS现有组件的类。我们将定义一个用户信息列表类,新建文件app/view/user/List.js,代码如下:

   1:  Ext.define('AM.view.user.List',{
   2:      extend: 'Ext.grid.Panel',
   3:      alias : 'widget.userlist',
   4:   
   5:      title : 'All Users',
   6:   
   7:      initComponent: function() {
   8:          this.store = {
   9:              fields: ['name','email'],
  10:              data  : [
  11:                  {name: 'Ed',email: 'ed@sencha.com'},
  12:                  {name: 'Tommy',email: 'tommy@sencha.com'}
  13:              ]
  14:          };
  15:   
  16:          this.columns = [
  17:              {header: 'Name',dataIndex: 'name',flex: 1},
  18:              {header: 'Email',dataIndex: 'email',flex: 1}
  19:          ];
  20:   
  21:          this.callParent(arguments);
  22:      }
  23:  });

如上,这个视图类也只是一个简单的普通类。我们只是继承了Grid组件,定义了一个别名,通过这个别名我们可以使用xtype调用这个类(一般是这么用,还有别的用处)。同时我们还添加了列表需要使用的store和columns信息。

接下来我们需要将这个视图添加到Users控制器中。我们已经使用'widget.'形式设置了类的别名,所以可以直接使用“userlist”作xtype,就跟以前使用“xtype: ‘panel’”一样。

   1:  Ext.define('AM.controller.Users',
   3:   
   4:      views: [
   5:          'user.List'
   6:      ],
   7:   
   8:      init: ...
   9:   
  10:      onPanelRendered: ...
  11:  });

然后我们在应用的Viewport布局中调用这个类。这需要在app.js中修改launch函数:

   1:  Ext.application({
   2:      ...
   3:   
   4:      launch: function() {
   5:          Ext.create('Ext.container.Viewport',{
   6:              layout: 'fit',
   7:              items: {
   8:                  xtype: 'userlist'
   9:              }
  10:          });
  11:      }
  12:  });

这里还有一点需要注意,在控制器的views数组中,我们设置了'user.List' 。这告诉了应用去调用视图文件view/user/List.js,这样在应用加载时就可以直接使用这个文件了。这里使用了ExtJS4新增的的动态调用服务以从服务器中获取文件。现在再看看我们的acount_manager应用:

Our first View

控制表格

请注意,代码更新后onPanelRendered函数仍然被调用了。这表名我们自定义的列表类仍然匹配“viewport > panel”选择器。因为我们自定义的userlist类继承自Grid类,Grid类继承自Panel类。

此时我们添加到选择器中的监听仍然被Viewport直属的Panel类或其子类所调用,我们可以利用这点对我们的用户信息列表的功能做些强化。还是使用init函数,不过要改为监听用户信息记录上的双击事件,使双击后可以对用户信息进行编辑。调整控制器:

   1:  views: [
   2:          'user.List'
   3:      ],
   4:   
   5:      init: function() {
   6:          this.control({
   7:              'userlist': {
   8:                  itemdblclick: this.editUser
   9:              }
  10:          });
  11:      },
  12:   
  13:      editUser: function(grid,record) {
  14:          console.log('Double clicked on ' + record.get('name'));
  15:      }

对控制器Users我们做了如下调整:

修改了ComponentQuery的选择器,现在只是使用‘userlist’;修改监听的事件为“itemdblclick”;调整事件处理函数为“editUser”。再次运行应用,双击记录时会在控制台上输出相应的信息:

Double click handler

应用运行的很好。但是我们不会满足于简单的在控制台上输出信息,我们希望能真正的编辑用户信息。这里要创建一个新的视图:app/view/user/Edit.js:

   1:  Ext.define('AM.view.user.Edit',{
   2:      extend: 'Ext.window.Window',
   3:      alias : 'widget.useredit',
   4:   
   5:      title : 'Edit User',
   6:      layout: 'fit',
   7:      autoShow: true,
   8:   
   9:      initComponent: function() {
  10:          this.items = [
  11:              {
  12:                  xtype: 'form',
  13:                  items: [
  14:                      {
  15:                          xtype: 'textfield',
  16:                          name : 'name',
  17:                          fieldLabel: 'Name'
  18:                      },
  19:                      {
  20:                          xtype: 'textfield',
  21:                          name : 'email',
  22:                          fieldLabel: 'Email'
  23:                      }
  24:                  ]
  25:              }
  26:          ];
  27:   
  28:          this.buttons = [
  29:              {
  30:                  text: 'Save',
  31:                  action: 'save'
  32:              },
  33:              {
  34:                  text: 'Cancel',
  35:                  scope: this,
  36:                  handler: this.close
  37:              }
  38:          ];
  39:   
  40:          this.callParent(arguments);
  41:      }
  42:  });

我们再次定义了一个ExtJS组件的子类。这次是继承了Ext.window.Window。我们仍需要使用initComponent函数为编辑视图Edit添加表单元素和按钮。布局采用了“fit”形式,窗体下只有一个form面板,在form面板中有两个文本框用以编辑姓名和邮件地址。最后还定义了两个按钮用以关闭窗体和保存更改。

然后我们要做的就是把这个编辑视图添加到控制器,并将用户信息添加到编辑视图。见代码:

   1:  Ext.define('AM.controller.Users',
   3:   
   4:      views: [
   5:          'user.List',
   6:          'user.Edit'
   7:      ],
   8:   
   9:      init: ...
  10:   
  11:      editUser: function(grid,record) {
  12:          var view = Ext.widget('useredit');
  13:   
  14:          view.down('form').loadRecord(record);
  15:      }
  16:  });

重点看一下editUser函数。在这个函数中,我们使用了函数’Ext.widget’,其功能类似于Ext.create('widget.useredit')。然后我们再次使用ComponentQuery建立了到编辑视图的映射。每个ExtJS4的组件都有一个down函数以接收ComponentQuery的选择器并快速的查找选择器对应的直属子元素。

双击列表中的行,效果如下图:

Loading the form

创建model和store

现在我们已经做好了编辑视图,也差不多可以进行编辑和保存了。但是在做这些工作之前,我们还需要对我们的代码进行一次重构。

现在的AM.view.user.List组件中,store是写在List类中。虽然现在应用也运行的很好,但是我们更倾向于将store独立出来,这样也便于我们对store中的数据进行处理。现在我们开始将store中从List视图中拆分出来放到app/store/Users.js中:

   1:  Ext.define('AM.store.Users',{
   2:      extend: 'Ext.data.Store',
   3:      fields: ['name','email'],
   4:      data: [
   5:          {name: 'Ed',email: 'ed@sencha.com'},
   6:          {name: 'Tommy',email: 'tommy@sencha.com'}
   7:      ]
   8:  });

然后我们还需要做两处小的调整。

首先在Users控制器中添加对store的调用:

   1:  Ext.define('AM.controller.Users',
   3:      stores: [
   4:          'Users'
   5:      ],
   6:      ...
   7:  });

然后更新app/view/user/List.js,添加对store的引用:

   1:  Ext.define('AM.view.user.List',{
   2:      extend: 'Ext.grid.Panel',
   3:      alias : 'widget.userlist',
   4:   
   5:      //we no longer define the Users store in the `initComponent` method
   6:      store: 'Users',
   7:   
   8:      ...
   9:  });

在控制器中引用store的目的是动态的调用store定义页,并为调用的store赋上一个简短的storeId。这使在视图中引用store更加方便(在上例中只是添加了一个属性 store: 'Users')。

现在我们是将字段(name和email)定义在store中。这样也可以工作了,但是ExtJS4提供了一个很有用的类Ext.data.Model来帮助我们。我们将使用Model再次重构我们的代码,Model定义于app/model/User.js中:

   1:  Ext.define('AM.model.User',{
   2:      extend: 'Ext.data.Model','email']
   4:  });

完成model的定义后,需要在控制器和store中添加对Model的引用,并从store去掉对应字段的声明:

   1:  //the Users controller will make sure that the User model is included on the page and available to our app
   2:  Ext.define('AM.controller.Users',{
   3:      extend: 'Ext.app.Controller',
   4:      stores: ['Users'],
   5:      models: ['User'],
   6:      ...
   7:  });
   8:   
   9:  // we now reference the Model instead of defining fields inline
  10:  Ext.define('AM.store.Users',{
  11:      extend: 'Ext.data.Store',
  12:      model: 'AM.model.User',
  13:   
  14:      data: [
  15:          {name: 'Ed',
  16:          {name: 'Tommy',email: 'tommy@sencha.com'}
  17:      ]
  18:  });

我们所做的重构工作不会马上产生效果,不过会有助于下一环节的工作。再次刷新页面运行应用会发现并无任何变化。不过是时候完成编辑功能了。

Loading the form

在Model中保存数据

现在我们有一个用户信息列表了,也可以双击记录打开编辑窗口了。接下来需要实现的任务就是保存用户编辑结果。现在我们的用户信息编辑窗口有一个表单和一个保存按钮“save”。接下来我们需要调整控制器的init函数,添加一个对“save”按钮的监听:

   1:  Ext.define('AM.controller.Users',{
   2:      init: function() {
   3:          this.control({
   4:              'viewport > userlist': {
   5:                  itemdblclick: this.editUser
   6:              },
   7:              'useredit button[action=save]': {
   8:                  click: this.updateUser
   9:              }
  10:          });
  11:      },
  12:   
  13:      updateUser: function(button) {
  14:          console.log('clicked the Save button');
  15:      }
  16:  });

我们在控制器中添加了第二个ComponentQuery选择器:‘'useredit button[action=save]'’。它和第一个选择器工作模式相同,首先根据xtype‘useredit’找到我们定义的用户信息编辑窗体,然后在窗体中查找action属性为‘save’的按钮。在我们定义用户信息编辑窗体类时,我们给“save”按钮设置action:’save’属性就给我们提供了一个可以快速定位到这个按钮的方法。

我们很高兴看到在我们点击save按钮时updateUser函数被调用并执行了。

Seeing the save handler

我们已经将save按钮点击事件的监听与处理完成了。接下来要做的就是完善updateUser这个函数,真正实现用户信息的编辑。在updateUser函数中我们需要从表单中获取信息并保存到用户信息store中。让我们看看功能是怎样实现的:

   1:  updateUser: function(button) {
   2:      var win    = button.up('window'),
   3:          form   = win.down('form'),
   4:          record = form.getRecord(),
   5:          values = form.getValues();
   6:   
   7:      record.set(values);
   8:      win.close();
   9:  }

这里需要打断一下做些说明。通过按钮的点击事件我们获取了对‘save’按钮的引用,但是我们真正需要的是包含数据的表单及用户信息编辑窗体。为了更快的解决问题我们再次使用了ComponentQuery的选择器,首先使用button.up('window')获取了用户信息编辑窗体,而后使用win.down('form')获取了表单。

这之后我们要做的工作就很简单了,获取加载到表单中的record,并用用户编辑后的信息更新record。最后关闭窗体,回到用户信息列表上。下图是应用运行后的结果,我们将第一条记录的姓名改为了“Ed Spencer”:

The record in the grid has been updated

保存记录到服务器上

刚刚的工作很简单吧。我们还需要完成最后一步——实现与服务器端的交互。之前我们只是生硬地将用户信息写在store中,接下来我们将尝试使用Ajax获取用户信息:

   1:  Ext.define('AM.store.Users',
   3:      model: 'AM.model.User',
   4:      autoLoad: true,
   5:   
   6:      proxy: {
   7:          type: 'ajax',
   8:          url: 'data/users.json',
   9:          reader: {
  10:              type: 'json',
  11:              root: 'users',
  12:              successProperty: 'success'
  13:          }
  14:      }
  15:  });

这里我们去掉了data属性,取而代之的是proxy属性。proxy是Extjs4中获取和保存数据的一种方式。ExtJS4中有多种形式的proxy,这里我们使用了比较简单的ajax proxy,我们告诉它从'data/users.json'中获取信息。

从上面的代码中看到,我们给proxy提供了一个reader对象。reader的作用是解码服务器端反馈的数据集信息。这次我们使用的是JSON Reader,并设置了它的root和successProperty属性。最后我们还需要创建一个'data/users.json'文件,将我们以前使用的数据复制进去:

   1:  {
   2:      success: true,
   3:      users: [
   4:          {id: 1,name: 'Ed',
   5:          {id: 2,name: 'Tommy',email: 'tommy@sencha.com'}
   6:      ]
   7:  }

在store中的另一处改动是将autoLoad属性设置为true。这意味着stroe会主动向proxy发出请求加载数据。现在我们刷新页面重新加载应用并不能看到任何变化。但是实际上获取数据的方式已经不一样了。

我们要做的最后一件事就是将对数据所做的改变返回到服务器上。在我们这个例子中我们是使用静态的JSON文件在服务器端存储数据,所以我们不能看到任何数据库的变化。但是至少我们可以验证应用是在正常工作的。首先我们需要对store的proxy做出一点小的调整告诉它将更新信息发送到另一个url:

   1:  proxy: {
   2:      type: 'ajax',
   3:      api: {
   4:          read: 'data/users.json',
   5:          update: 'data/updateUsers.json'
   6:      },
   7:      reader: {
   8:          type: 'json',
   9:          root: 'users',
  10:          successProperty: 'success'
  11:      }
  12:  }

我们仍然会从users.json中获取数据,但是所有的更新都会发送到updateUsers.json。这只会返回一个虚拟的相应,让我们知道应用在正常运行。updateUsers.json中的内容是{"success": true}。然后还要做的就是告诉Store在编辑完成后同步一次记录,为此我们还要在updateUser函数中添加一行代码:

   1:  updateUser: function(button) {
   2:      var win    = button.up('window'),
   5:          values = form.getValues();
   6:   
   7:      record.set(values);
   8:      win.close();
   9:      this.getUsersStore().sync();
  10:  }

现在我们的这个示例应用已经完成了。我们再运行这个应用一次,编辑一条记录,点击保存按钮,然后查看request是否正确的发送给了updateUser.json文件:

The record in the grid has been updated

示例应用account_manager的源码可在ExtJS4的文档中找到,所在目录是examples/app/simple。

作者注:本文译自Extjs4.0文档中的《MVC Architecture》一文。限于在下的英文水平及对Ext的理解,所以难免有些不足之处。不过是抱着自己学习也方便大家的心思,抛砖引玉勉强翻译了全文。如果有不通之处还请及时指正。

相关文章

我有一个问题,我不知道如何解决.我有一个Indy10HTTP服务器.我...
我正在使用sdk1.17开发一个Firefox附加组件.它包含一个带有按...
Ext.define('PhysicsEvaluationSystemV1.view.base.Bas...
默认所有列(假设列3最大3列,动态显示),使用headerRowsEx中...
序言   1.ExtJs是一套很好的后台框架。现在很流行的,我们...
我在ExtJs中有这个表单.如果field1不为空,则field2不能为空....