ExtJS的grid行编辑插件事件触发【金沙官网线上】

       本来这个号是为了找工作(记录自己找工作期间刷代码的所想所得,重要是假装自己有一个技术博客...),但是排序算法还没刷完就找到了工作,所以就懒病继续发作就没写了。现在工作了,真是什么都不懂,为了记录工作中遇到的问题,必须再把它捡起来。

概述


大型的应用在开发和运维上都存在着困难。应用功能的调整和开发人员的调动都会影响对项目的掌控。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,因为根本就不懂,所以就给我安排了一个简单的表格增删查改的实现,之中遇到了许多问题,慢慢解决吧,现在先说说在一个grid中,当使用了行编辑插件后,点击保存如何触发事件。

 

       如何在view面设置一个监听、触发监听,之后在控制器页面来处理这个监听程序,过程如下:对于每一个类,由什么来触发监听,可以再ExtJS自带的api文档中找到该类的Events项,里面有哪些事件,哪些事件就能触发监听。例如Ext.grid.plugin.RowEditing类,有beforeedit、canceledit、edit、validateedit四种事件,那么listener就可以监听这四种事件,阅读api文档可知它们分别监听什么事件,在view页面插件配置项下编写如下代码:

文件结构


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

金沙官网线上 1

在这个例子中我们封装了一个应用程序称为“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>
listeners: {
            edit: {
                fn: 'wobuzhidao',
                scope: 'controller'
            }
        }

 

  Listeners监听了edit事件,其处理函数名为wobuzhidao,作用范围在控制器,控制器代码如下

从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来填充整个屏幕。

金沙官网线上 2

wobuzhidao: function (editor, context, eOpts) {
        alert(context.record.get('age'));
    }

定义一个控制器(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函数。

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

金沙官网线上 3

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

 

本文由金沙官网线上发布于Web前端,转载请注明出处:ExtJS的grid行编辑插件事件触发【金沙官网线上】

您可能还会对下面的文章感兴趣: