【美高梅娱乐场网站】ExtJS的grid行编辑插件事件触发

发布时间:2019-05-05  栏目:计算机教程  评论:0 Comments

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

保存记录到服务器上


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

   1:  Ext.define('AM.store.Users', {

   2:      extend: 'Ext.data.Store',

   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',    email: 'ed@sencha.com'},

   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'),

   3:          form   = win.down('form'),

   4:          record = form.getRecord(),

   5:          values = form.getValues();

   6:   

   7:      record.set(values);

   8:      win.close();

   9:      this.getUsersStore().sync();

  10:  }

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

美高梅娱乐场网站 1

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

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

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

 

listeners: {
            edit: {
                fn: 'wobuzhidao',
                scope: 'controller'
            }
        }

 

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

控制表格


请注意,代码更新后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”。再次运行应用,双击记录时会在控制台上输出相应的信息:

美高梅娱乐场网站 2

应用运行的很好。但是我们不会满足于简单的在控制台上输出信息,我们希望能真正的编辑用户信息。这里要创建一个新的视图: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', {

   2:      extend: 'Ext.app.Controller',

   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的选择器并快速的查找选择器对应的直属子元素。

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

美高梅娱乐场网站 3

     
 最近的项目中要用到ExtJS,因为根本就不懂,所以就给我安排了一个简单的表格增删查改的实现,之中遇到了许多问题,慢慢解决吧,现在先说说在一个grid中,当使用了行编辑插件后,点击保存如何触发事件。

文件结构


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

美高梅娱乐场网站 4

在这个例子中我们封装了一个应用程序称为“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>

     
 在这个处理函数里,有3个参数,是从view页面监听程序的edit传过来的,通过查阅api文档我们可以看到这三个参数,并且知道他们分别代表什么。以上代码实现了在grid里的plugin插件中,对行编辑设置了一个监听,当编辑保存后会触发edit事件,通过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函数。

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

美高梅娱乐场网站 5

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

 

留下评论

网站地图xml地图