[Ext JS 6 By Example 翻译] 第4章 - 数据包装

最新推荐文章于 2022-06-22 09:32:49 发布
最新推荐文章于 2022-06-22 09:32:49 发布
阅读量630 收藏
点赞数
分类专栏： Ext.js

转载自：http://www.jeeboot.com/archives/1222.html


本章探索 Ext js 中处理数据可用的工具以及服务器和客户端之间的通信。在本章结束时将写一个调用 RESTful 服务的例子。下面是本章的内容：

  • 模型
  • Schema
  • Stores
  • 代理
  • 过滤和排序
  • 做一个基于 RESTful 的小项目

Model（模型）

一个模型包含字段，字段类型，校验，关联和代理。它是通过扩展 Ext.data.Model 类来定义的。

其中类型，校验，关联和代理都是可选的。 当一个字段没有指定类型时，将使用默认类型 ‘auto’。 通常 代理都是设置在 store 中，但是 model 里也可以设置代理。

Field（字段）

Ext.data.field.Field 用于添加模型的属性。 这个属性字段的类型可以是预定义的或自定义类型。下列是可用的预定义类型：

  • auto
  • boolean
  • date
  • int
  • number
  • string

数据转换

默认当你为一个字段指定类型后，这个数据将在保存到该字段之前进行转换。转换的过程由内置的 convert 方法处理。auto 字段类型不具备 convert 方法，所以 auto 类型的字段不会发生转换。

其他所有的字段类型都有 convert 方法。如果你想避免其他字段转换来提高性能，你可以通过指定各自的转换配置为 null 。如下列 Employee 模型所示。

验证器/校验器

数据模型支持数据的校验。下列是支持的验证器：

  • presence: 确保值是存在于一个字段
  • format: 能够用一个正则表达式来进行验证
  • length: 支持最大和最小长度的验证
  • exclusion 和 inclusion: 你可以通过给出一组值来确保字段的值存在或不存在于这组值中。

下列代码示例展示一个 Employee 模型，在模型的字段上使用验证器：

[javascript]  view plain  copy
  1. Ext.define('Employee', {     
  2.     extend: 'Ext.data.Model',  
  3.     fields: [  
  4.         { name: 'id', type: 'int', convert: null },  
  5.         { name: 'firstName', type: 'string' },     
  6.         { name: 'lastName', type: 'string' },  
  7.         { name: 'fulltime', type: 'boolean', defaultValue: true, convert: null },  
  8.         { name: 'gender', type: 'string' },  
  9.         { name: 'phoneNumber', type: 'string'},],     
  10.     validators: {       
  11.         firstName: [{   
  12.             type: 'presence'  
  13.         },{   
  14.             type: 'length',   
  15.             min: 2   
  16.         }],       
  17.         lastName:[{   
  18.             type: 'presence'  
  19.         },{   
  20.             type: 'length',   
  21.             min: 2   
  22.         }],       
  23.         phoneNumber: {         
  24.             type: 'format',  
  25.             matcher: '/^[(+{1})|(00{1})]+([0-9]){7,10}$/'  
  26.         },gender: {         
  27.             type: 'inclusion',         
  28.             list: ['Male', 'Female']  
  29.         }  
  30.     }  
  31. });  


创建一个模型的实例，使用 Ext.create ，如以下代码所示：

[javascript]  view plain  copy
  1. var newEmployee = Ext.create('Employee', {     
  2.     id : 1,     
  3.     firstName : 'Shiva',     
  4.     lastName : 'Kumar',     
  5.     fulltime : true,     
  6.     gender: 'Male',     
  7.     phoneNumber: '123-456-7890'   
  8. });  

 

创建好的模型对象有 get 和 set 方法用来读取和设置字段值：

[javascript]  view plain  copy
  1. var lastName = newEmployee.get('lastName'); newEmployee.set('gender','Female');  
 

关系

定义实体之间的关系，使用下列关系类型之一：

One-to-one（一对一）

下列代码代表一对一关系：

[javascript]  view plain  copy
  1. Ext.define('Address', {     
  2.     extend: 'Ext.data.Model',  
  3.     fields: [  
  4.         'address',  
  5.         'city',  
  6.         'state',  
  7.         'zipcode']  
  8. });  
[javascript]  view plain  copy
  1. Ext.define('Employee', {     
  2.     extend: 'Ext.data.Model',  
  3.     fields: [{       
  4.         name: 'addressId',       
  5.         reference: 'Address'  
  6.     }]  
  7. });  


One-to-many（一对多）

下列代码代表一对多关系：

[javascript]  view plain  copy
  1. Ext.define('Department', {     
  2.     extend: 'Ext.data.Model',  
  3.     fields: [{   
  4.             name: 'employeeId',   
  5.             reference: 'Employee'   
  6.     }]  
  7. });  
[javascript]  view plain  copy
  1. Ext.define('Division', {     
  2.     extend: 'Ext.data.Model',  
  3.     fields: [{   
  4.         name: 'departmentId',   
  5.         reference: 'Department'   
  6.     }]  
  7. });  


Many-to-many（多对多）

下列代码代表多对多关系：

[javascript]  view plain  copy
  1. Ext.define('Employee', {     
  2.     extend: 'Ext.data.Model',  
  3.     fields: [{   
  4.         name: 'empId',   
  5.         type: 'int',   
  6.         convert: null   
  7.     },{   
  8.         name: 'firstName',   
  9.         type: 'string'   
  10.     },{   
  11.         name: 'lastName',   
  12.         type: 'string'   
  13.     }],  
  14.     manyToMany: 'Project'   
  15. });  
[javascript]  view plain  copy
  1. Ext.define('Project', {     
  2.     extend: 'Ext.data.Model',  
  3.     fields: [     
  4.         'name'  
  5.     ],  
  6.     manyToMany: 'Employee'   
  7. });  

 

自定义字段类型

你也可以通过简单的扩展 Ext.data.field.Field 类来创建自定义字段类型。如以下代码所示：

[javascript]  view plain  copy
  1. Ext.define('App.field.Email', {     
  2.     extend: 'Ext.data.field.Field',     
  3.     alias: 'data.field.email',  
  4.     validators: {       
  5.         type: 'format',  
  6.         matcher: /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,       
  7.         message: 'Wrong Email Format'  
  8.     }  
  9. });  


Store

一个 store 代表一个 模型的实例 的集合并用于代理获取数据。store 还定义了集合操作，例如 排序，过滤等等。它是通过扩展 Ext.data.Store 定义的。

通常，当定义一个 store ，你需要为 store 指定一个 代理。这是一个配置属性，它告诉 store 如何读取和写入数据。在本章的后面我们将会看到更多详细的不同种类的代理。

 

下列代码是一个 store 的例子，它使用 RESTful API 请求加载为 JSON 格式数据：

[javascript]  view plain  copy
  1. var myStore = Ext.create('Ext.data.Store', {  
  2.     model: 'Employee',     
  3.     storeId: 'mystore',     
  4.     proxy: {       
  5.         type: 'rest',       
  6.         url: '/employee',       
  7.         reader: {         
  8.             type: 'json',         
  9.             rootProperty: 'data'  
  10.         }  
  11.     },     
  12.     autoLoad: true,     
  13.     autoSync: true   
  14. });  


这里 storeId 是 store 的唯一标示符。这个 store 有一个方法 load ，用于通过代理配置加载数据。如果你设置 autoLoad 为 true ，那么当 store 创建后将会自动调用 load 方法。如果设置 autoLoad 为 false ，那么你可以手动的调用 load 方法加载数据。

同样的，你可以设置 autoSync 为 true ，当你对 store 的记录进行修改新增和删除时将会自动发生同步。

在前面的例子中，当在 store 中执行修改，新增或删除时，它将调用 REST service API 。如果你设置这个属性为 false ，那么你可以调用 sync 方法执行同步操作。

调用 sync 方法将触发一个批量操作。所以如果你添加和删除了多条记录，那么调用 sync方法这个过程中将触发多次服务器调用。这是一个 sync 调用的例子：

[javascript]  view plain  copy
  1. store.sync({  
  2.     callback: function (batch, options) {  
  3.         //Do something  
  4.     },  
  5.     success: function (batch, options) {  
  6.         //Do something  
  7.     },  
  8.     failure: function (batch, options) {  
  9.         //Do something  
  10.     },     
  11.     scope: this   
  12. });  


这里，当所有 sync 操作全部完成并且没有任何例外和失败时调用 success 方法。如果有一个或多个操作在 sync 过程中失败，将调用 failure 方法。callback 方法则会在同步操作完成后，不论成功失败都会被调用。

如果 failure 被调用，你可以检查 batch 异常数组来看到什么操作失败，为什么。这里 options 是 sync 方法中传递的原始参数。

这个 sync 方法调用时也可以添加一个属性 params ，它可以用于在同步的时候传递任意你想附加的参数。


内联数据 store

如果你不想绑定 store 到服务器或外部存储，例如浏览器本地存储，但还想使用一些特殊的的静态数据，那么可以直接硬编码内联数据到 store ，如以下代码所示：

[javascript]  view plain  copy
  1. Ext.create('Ext.data.Store', {     
  2.     model: 'Employee',     
  3.     data: [{  
  4.         firstName: 'Shiva',       
  5.         lastName: 'Kumar',       
  6.         gender: 'Male',       
  7.         fulltime: true,  
  8.         phoneNumber: '123-456-7890'  
  9.     },{  
  10.         firstName: 'Vishwa',       
  11.         lastName: 'Anand',       
  12.         gender: 'Male',       
  13.         fulltime: true,  
  14.         phoneNumber: '123-456-7890'  
  15.     }]   
  16. });  


过滤和排序

store 支持本地或远程的过滤和排序。下面是本地排序的例子：

[javascript]  view plain  copy
  1. var myStore = Ext.create('Ext.data.Store', {     
  2.     model: 'Employee',  
  3.     sorters: [{       
  4.         property: 'firstName',       
  5.         direction: 'ASC'  
  6.     }, {  
  7.         property: 'fulltime',       
  8.         direction: 'DESC'  
  9.     }],  
  10.     filters: [{       
  11.         property: 'firstName',       
  12.         value: /an/  
  13.     }]  
  14. });  


使用远程排序和远程过滤，需要设置 remoteSort 和 remoteFilter 属性为 true 。如果你设置为 true ，那么在服务器端你必须要执行过滤和排序并为客户端返回过滤或排序后的数据。


访问 store

你也许需要在应用的其他地方访问这个 store 有很多方法可以用。

使用 StoreManager 访问 store

使用 store 管理器的 lokkup 方法，你能够在程序的任何地方来访问 store。为此我们需要使用 storeId ，注意，当 store 通过一个控制器实例化的时设置 storeId，storeId 将会被覆盖，这是一个例子：

[javascript]  view plain  copy
  1. Ext.create('Ext.data.Store', {     
  2.     model: 'Employee',     
  3.     storeId: 'mystore',     
  4.     proxy: {       
  5.         type: 'rest',       
  6.         url: '/employee',       
  7.         reader: {         
  8.             type: 'json',         
  9.             rootProperty: 'data'  
  10.    
  11.         }  
  12.     }  
  13. });  


假设我们已经创建了 store 如上所示。现在你可以通过传递 storeId 到 store 管理器的 StoreManager.lookup 方法访问这个 store，如以下代码所示：

[javascript]  view plain  copy
  1. Ext.data.StoreManager.lookup('myStore');  

你也可以使用 Ext.getStore 方法。Ext.getStore 是 Ext.data.StoreManager.lookup 的快捷方法。


使用 Ext.app.ViewModel 访问 store

你可以通过 Ext.app.ViewModel 的 getStore 方法 访问 store 。当你是在 ViewController 中，最好使用这种方式，下面是代码示例：

[javascript]  view plain  copy
  1. var myStore = this.getViewModel().getStore('myStore')  

这个 getStore 方法也定义在 view 中，你也可以用它访问 store。


Store 事件

store 提供了很多可监听的事件。store 的一些常用事件：

  • add: 当一条记录添加到 store 后调用
  • beforeload: 在加载数据之前调用
  • beforesync: 在进行同步操作之前调用
  • datachanged: 当 store中的记录产生新增或删除时触发调用
  • load: 当 store 读取一个远程数据源后触发调用
  • remove: 从 store 移除一条记录触发调用
  • update: 当 store 中的一条记录被更新触发调用

给出的一个 store 事件监听的例子：

[javascript]  view plain  copy
  1. Ext.create('Ext.data.Store', {     
  2.     model: 'Employee ',     
  3.     storeId: 'mystore',     
  4.     proxy: {       
  5.         type: 'rest',       
  6.         url: '/employee',       
  7.         reader: {         
  8.             type: 'json',         
  9.             rootProperty: 'data'       
  10.         }  
  11.     },     
  12.     listeners: {  
  13.         load: function (store, records, options) {  
  14.             //Do something  
  15.         }  
  16.     }  
  17. });  


如果你想在你的控制器中监听 store 事件，你可以这样做：

[javascript]  view plain  copy
  1. init: function() {  
  2.     this.getViewModel().getStore('myStore').on('load', this.onStoreLoad, this);   
  3. }  


在 ViewModel 中定义 store

你可以分别定义 store 和 ViewModel 或者定义到一起。通常可取的定义 store 在 ViewModel 自身。一个例子如下：

[javascript]  view plain  copy
  1. Ext.define('MyApp.view.employee.EmployeeModel', {     
  2.     extend: 'Ext.app.ViewModel',     
  3.     alias: 'viewmodel.employee',     
  4.     stores: {       
  5.         employee: {         
  6.             fields: [{   
  7.                 name: 'id',   
  8.                 type: 'string'   
  9.             },{   
  10.                 name: 'firstname',   
  11.                 type: 'string'   
  12.             },{   
  13.                 name: 'lastname',   
  14.                 type: 'string'   
  15.             }],         
  16.             autoLoad: false,         
  17.             sorters: [{           
  18.                 property: 'firstname',           
  19.                 direction: 'ASC'  
  20.             }],         
  21.             proxy: {           
  22.                 type: 'rest',           
  23.                 url: 'employee',           
  24.                 reader: {             
  25.                     type: 'json',  
  26.                 },           
  27.                 writer: {            
  28.                     type: 'json'           
  29.                 }  
  30.             }  
  31.         }  
  32.     }  
  33. });  


代理

所有的 stores 和 models 使用 proxy 来加载和保存数据。在代理中使用这个配置你可以指定如何读取和写入数据。你也可以指定调用 URL 读取数据；你可以告诉读取器这些数据的格式，不论是 JSON 还是 XML ，等等。

有两种类型的代理：客户端代理和服务器代理。

客户端代理

客户端代理是用于处理客户端本身数据的加载和保存。这氛围三种客户端代理：内存，本地存储，和会话存储。

内存代理

内存代理是用于内存中的局部变量数据。下列代码展示了一个内存代理的例子。在这里这个数据的值没有硬编码。只要是合适的格式，可以是任何变量的数据:

[javascript]  view plain  copy
  1. var data = {     
  2.         data: [{  
  3.             firstName: 'Shiva',       
  4.             lastName: 'Kumar',       
  5.             gender: 'Male',       
  6.             fulltime: true,  
  7.             phoneNumber: '123-456-7890'  
  8.         },{  
  9.             firstName: 'Vishwa',       
  10.             lastName: 'Anand',       
  11.             gender: 'Male',       
  12.             fulltime: true,  
  13.             phoneNumber: '123-456-7890'  
  14.         }]  
  15. };   
  16. var myStore = Ext.create('Ext.data.Store', {  
  17.     model: 'Employee',     
  18.     data : data,     
  19.     proxy: {       
  20.         type: 'memory',       
  21.         reader: {         
  22.             type: 'json',         
  23.             rootProperty: 'Employee'  
  24.    
  25.         }  
  26.     }  
  27. });  


本地存储代理

这个是用于访问浏览器本地存储。它是一个键值对存储添加在 HTML5 ，所以需要浏览器支持：

[javascript]  view plain  copy
  1. var myStore = Ext.create('Ext.data.Store', {     
  2.     model: 'Benefits',     
  3.     autoLoad: true,     
  4.     proxy: {       
  5.         type: 'localstorage',       
  6.         id: 'benefits'  
  7.     }  
  8. });  


会话存储代理

这个是用于访问浏览器会话存储。这也是一个 html5 特性，因此需要比较现代的浏览器才能支持。这些数据是当 session 超时后会被销毁：

[javascript]  view plain  copy
  1. var myStore = Ext.create('Ext.data.Store', {     
  2.     model: 'Benefits',     
  3.     autoLoad: true,     
  4.     proxy: {       
  5.         type: 'localstorage',       
  6.         id : 'benefits'  
  7.     }  
  8. });  


 

服务器端代理

服务器端代理是向服务器通信来读取或保存数据。有四种代理：

  • Ajax: 用于异步请求数据
  • Direct: 使用 Direct 与服务器通信
  • JSONP (JSON with padding): 这很有用，当你需要发送跨域请求时。而 ajax 只能请求相同的域。
  • REST: 这会向服务器发送一个 ajax 请求，使用 RESTful 的风格，例如 GET，POST，PUT，和 DELETE。

在本章我们已经看到过一个 REST 代理的例子。让我们瞧一瞧 JSONP 的例子：

[javascript]  view plain  copy
  1. var myStore = Ext.create('Ext.data.Store', {     
  2.     model: 'Products',     
  3.     proxy: {       
  4.         type: 'jsonp',  
  5.         url : 'http://domain.com/products',       
  6.         callbackKey: 'productsCallback'  
  7.     }  
  8. });  


To do 待办（RESTful 的示例项目）

现在，让我们运用本章和前面章节所学内容，创建一个 To do 待办 应用。这里我们将使用 store 的 REST 代理来连接 REST 服务。

我们来创建一个简单的 RESTful 服务，我们将使用 Go 语言，也称为 Golang 。它由 Google 开发，是静态语言，语法松散。

你不必学习 go 语言，这个项目主要集中在 Ext JS 的教学。你可以用任意的你熟悉的语言替换 Go 语言开发的 RESTful 服务代码。

 

这是我们将要创建的应用的设计：

1

让我们瞧一瞧这个项目的一些重要文件。完整的代码在这里 https://github.com/ananddayalan/extjs-by-example-todo。

下面截图展示了这个程序的目录结构：

 1

首先，让我们先来创建 store ，我们已经在本章学习过了。这里我将 store 写在 ViewModel 中。

下列 ViewModel中有三个字段：id ，desc（描述） ，done（显示待办是否完成），代理类型为 rest 并设置 URL 地址为 tasks 。因为是 REST 代理，它将会根据不同的操作访问相应的 HTTP 服务。

例如，当你删除一条记录，这个服务请求 URL 将是 <base URL>/task/{id} 。如果你的应用部署在 localhost 端口为 9001 ，那么请求 URL 就是 http://localhost:9001/tasks/23333 ，并且 HTTP verb 是 DELETE ，你可以理解为提交的 HTTP 动作类型。这里 23333 是记录的ID。当你添加一条记录，URL 就是 http://localhost:9001/tasks ，这时 HTTP verb 就是 POST，同时要添加的记录也会以 JSON 形式发送给服务器：

[javascript]  view plain  copy
  1. Ext.define('ToDo.view.toDoList.ToDoListModel', {     
  2.     extend: 'Ext.app.ViewModel',     
  3.     alias: 'viewmodel.todoList',     
  4.     stores: {       
  5.         todos: {  
  6.             fields: [ {     
  7.                 name: 'id',   
  8.                 type: 'string'   
  9.             },{     
  10.                 name: 'desc',   
  11.                 type: 'string'     
  12.             }],         
  13.             autoLoad: true,         
  14.             sorters: [{           
  15.                 property: 'done',           
  16.                 direction: 'ASC'  
  17.             }],         
  18.             proxy: {           
  19.                 type: 'rest',           
  20.                 url: 'tasks',           
  21.                 reader: {             
  22.                     type: 'json',  
  23.                 },           
  24.                 writer: {             
  25.                     type: 'json'  
  26.                 }  
  27.             }  
  28.         }  
  29.     }  
  30. });  


现在我们来创建视图，我们将创建一个 view 作为 To do 待办 列表，一个文本框用于键入新的待办，和一个添加按钮。

这个 To do 待办 列表的 UI 是基于 store 中的记录，动态的创建的，并且每当一个记录添加或移除，这个 view 都会相应的更新。Ext JS grid 组件可以实现我们的目的，但是你还没有学习过这个组件，所以这里我们不使用它来创建，而通过其他方式，你还将学习到如何处理自定义 UI。

动态创建 待办列表 UI，我把代码写在 ViewController 里。在这个 view 中，我添加了 文本框 和 按钮：

[javascript]  view plain  copy
  1. Ext.define('ToDo.view.toDoList.ToDoList', {     
  2.     extend: 'Ext.panel.Panel',  
  3.    
  4.     /* Marks these are required classes to be to loaded before loading this view */     
  5.     requires: [  
  6.         'ToDo.view.toDoList.ToDoListController',  
  7.         'ToDo.view.toDoList.ToDoListModel'  
  8.     ],  
  9.     xtype: 'app-todoList',     
  10.     controller: 'todoList',  
  11.     /* View model of the view. */  
  12.     viewModel: {       
  13.         type: 'todoList'  
  14.     },  
  15.     items: [{       
  16.         xype: 'container',       
  17.         items: [{  
  18.             xtype: 'container',         
  19.             layout: 'hbox',         
  20.             cls: 'task-entry-panel',         
  21.             defaults: {           
  22.                 flex: 1  
  23.             },         
  24.             items: [{  
  25.                 reference: 'newToDo',           
  26.                 xtype: 'textfield',  
  27.                 emptyText: 'Enter a new todo here'         
  28.             },{  
  29.                 xtype: 'button',           
  30.                 name: 'addNewToDo',           
  31.                 cls: 'btn-orange',           
  32.                 text: 'Add',           
  33.                 maxWidth: 50,           
  34.                 handler: 'onAddToDo'  
  35.             }]  
  36.         }]  
  37.     }]  
  38. });  


上面的 view 代码里，我指定了两个 cls 属性分别是 btn-orange 和 task-entry-panel 。这是 CSS 类，用于添加一些 CSS 样式。在上面的 UI 截图中，你可以看到 Add 按钮并不是我们所用的主题（crisp）的默认颜色。因为我指定了 CSS 类来自定义这个按钮了。

现在我们可以创建 ViewController 。我们将通过在初始化函数中读取 store 中的记录来创建 待办列表 的UI 。这里，一旦应用加载，我们将调用 store 的 load 方法。这将使得 rest 服务调用，从服务器获取记录，并遍历结果，每一条记录我们都会创建一行在 UI 中。

提供删除功能，我会在每一条记录上添加一个删除图标。下列代码用于绑定这个图标的点击事件。待办记录 UI 是动态生成的，所以我们需要事件委派，如以下代码所示：

[javascript]  view plain  copy
  1. Ext.getBody().on('click', function (event, target) {     
  2.     me.onDelete(event, target);  
  3. } , null, {delegate: '.fa-times' });  


如果 UI 不是动态添加的，正常的绑定点击事件，如以下代码：

 

[javascript]  view plain  copy
  1. Ext.select('fa-times').on('click', function (event, target) {     
  2.     me.onDelete(event, target);   
  3. });  

 

以下是视图待办列表（ToDoList）  的视图控制器（ViewController）的代码。  onAddToDo 方法是添加按钮的点击事件处理，方法里通过 lookupReference 方法传递引用名称设置到 ToDoList 视图：

[javascript]  view plain  copy
  1. Ext.define('ToDo.view.toDoList.ToDoListController', {     
  2.     extend: 'Ext.app.ViewController',     
  3.     alias: 'controller.todoList',     
  4.     views: ['ToDo.view.toDoList.ToDoList'],  
  5.     init: function () {       
  6.         var me = this;  
  7.         //Here we're calling the load method of the store and passing an anonymous method for the callback. So, the load will call the server to get the data first and calls the anonymous method. The anonymous method then, add the data to the view.  
  8.         this.getViewModel().data.todos.load(function (records) {  
  9.             Ext.each(records, function (record) {  
  10.                 //Add a container for each record           
  11.                 me.addToDoToView(record);  
  12.             });  
  13.    
  14.         });  
  15.           
  16.         Ext.getBody().on('click', function (event, target) {         
  17.             me.onDelete(event, target);  
  18.         }, null, {  
  19.             delegate: '.fa-times'  
  20.         });  
  21.     },  
  22.     onAddToDo: function () {  
  23.         var store = this.getViewModel().data.todos;  
  24.                 //newToDo 就是文本框的 引用  
  25.         var desc = this.lookupReference('newToDo').value.trim();       
  26.         if (desc != '') {         
  27.             store.add({           
  28.                 desc: desc  
  29.             });         
  30.             store.sync({  
  31.                 success: function (batch, options) {             
  32.                     this.lookupReference('newToDo').setValue('');            
  33.                     this.addToDoToView(options.operations.create[0]);  
  34.                 },  
  35.                 scope: this  
  36.             });  
  37.         }  
  38.     },  
  39.     addToDoToView: function (record) {       
  40.         this.view.add([{         
  41.             xtype: 'container',         
  42.             layout: 'hbox',         
  43.             cls: 'row',         
  44.             items: [{  
  45.                 xtype: 'checkbox',           
  46.                 boxLabel: record.get('desc'),           
  47.                 checked: record.get('done'),         
  48.                 flex: 1  
  49.             },{  
  50.                 html: '<a class="hidden" href="#"><i taskId="' + record.get('id') + '" class="fa fa-times"></i></a>',  
  51.             }]  
  52.         }]);  
  53.     },  
  54.     onDelete: function (event, target) {       
  55.         var store = this.getViewModel().data.todos;       
  56.         var targetCmp = Ext.get(target);       
  57.         var id = targetCmp.getAttribute('taskId');       
  58.         store.remove(store.getById(id));       
  59.         store.sync({         
  60.             success: function () {  
  61.                 this.view.remove(targetCmp.up('.row').id)  
  62.             },  
  63.             scope: this  
  64.         });  
  65.     }  
  66. });  


最后，让我们来创建 REST 服务。Go 语言可以安装在 mac OS，Windows，Linux 等等。这里下载 https://golang.org.

 

Go 语言安装完成之后，你需要设置 GOROOT 环境变量为 Go 语言的安装目录。linux 应该添加下列命令到 $HOME/.profile:

[plain]  view plain  copy
  1. export GOROOT=/usr/local/go export PATH=$PATH:$GOROOT/bin  

 

针对本项目，我将使用一个名为 Gorilla 的路由模块，安装这个模块使用以下命令：

[plain]  view plain  copy
  1. go get github.com/gorilla/mux  
 

 

以下是 REST 服务的代码。

  • 这段代码不会存数据到数据库里，所有的数据都是在内存中，当你关闭程序，数据将被销毁。

[plain]  view plain  copy
  1. package main  
  2. import ( "fmt"  
  3. "encoding/json"  
  4. "net/http" "strconv"  
  5. "github.com/gorilla/mux"  
  6. )  
  7. type Task struct {  
  8.     Id string `json:"id"`  
  9.     Desc string `json:"desc"`  
  10.     Done bool `json:"done"`  
  11. }   
  12. var tasks map[string] *Task  
  13. func GetToDo(rw http.ResponseWriter, req * http.Request) {  
  14.     vars := mux.Vars(req)     
  15.     task := tasks[vars["id"]]  
  16.     js, err := json.Marshal(task)  
  17.     if err != nil {  
  18.         http.Error(rw, err.Error(), http.StatusInternalServerError)  
  19.         return  
  20.     }  
  21.     fmt.Fprint(rw, string(js))   
  22. }  
  23.    
  24. func UpdateToDo(rw http.ResponseWriter, req * http.Request) {  
  25.     vars := mux.Vars(req)  
  26.     task:= tasks[vars["id"]]  
  27.     dec:= json.NewDecoder(req.Body)     
  28.     err:= dec.Decode( & task)     
  29.     if err != nil {  
  30.         http.Error(rw, err.Error(), http.StatusInternalServerError)  
  31.         return  
  32.     }  
  33.     task.Id = vars["id"]  
  34.     retjs, err:= json.Marshal(task)  
  35.     if err != nil {  
  36.         http.Error(rw, err.Error(), http.StatusInternalServerError)  
  37.         return  
  38.     }  
  39.     fmt.Fprint(rw, string(retjs))   
  40. }  
  41.    
  42. func DeleteToDo(rw http.ResponseWriter, req * http.Request) {  
  43.     vars := mux.Vars(req)     
  44.     delete(tasks, vars["id"])     
  45.     fmt.Fprint(rw, "{status : 'success'}")   
  46. }  
  47.    
  48. func AddToDo(rw http.ResponseWriter, req * http.Request) {  
  49.     task:= new(Task)  
  50.     dec:= json.NewDecoder(req.Body)     
  51.     err:= dec.Decode( & task)     
  52.     if err != nil {  
  53.         http.Error(rw, err.Error(), http.StatusInternalServerError)       
  54.         return  
  55.     }  
  56.     tasks[task.Id] = task  
  57.     retjs, err:= json.Marshal(task)  
  58.     if err != nil {  
  59.         http.Error(rw, err.Error(), http.StatusInternalServerError)  
  60.         return  
  61.     }  
  62.     fmt.Fprint(rw, string(retjs))   
  63. }  
  64.    
  65. func GetToDos(rw http.ResponseWriter, req * http.Request) {  
  66.         v := make([]*Task, 0, len(tasks))  
  67.         for _, value := range tasks {       
  68.             v = append(v, value)  
  69.         }  
  70.     js, err:= json.Marshal(v)     
  71.     if err != nil {  
  72.         http.Error(rw, err.Error(), http.StatusInternalServerError)  
  73.         return  
  74.     }  
  75.     fmt.Fprint(rw, string(js))   
  76. }  
  77.    
  78. func main() {  
  79.    var port = 9001     
  80.    router:= mux.NewRouter()     
  81.    tasks = make(map[string] *Task)  
  82.    router.HandleFunc("/tasks", GetToDos).Methods("GET")     
  83.    router.HandleFunc("/tasks", AddToDo).Methods("POST")     
  84.    router.HandleFunc("/tasks/{id}", GetToDo).Methods("GET")     
  85.    router.HandleFunc("/tasks/{id}", UpdateToDo).Methods("PUT")     
  86.    router.HandleFunc("/tasks/{id}", DeleteToDo).Methods("DELETE")     
  87.    router.PathPrefix("/").Handler(http.FileServer(http.Dir("../")))  
  88.    fmt.Println("Listening on port", port)  
  89.    http.ListenAndServe("localhost:" + strconv.Itoa(port), router)   
  90. }  


使用下列命令运行服务：

[plain]  view plain  copy
  1. go run ToDo.go  

如果没有报错，应该显示类似于以下代码：

[plain]  view plain  copy
  1. Listening on port 9001  

 

现在你可以访问 localhost:9001 查看应用了：

1

完整的代码在这里 https://github.com/ananddayalan/extjs-byexample-todo.


总结

在本章中，你学习了如何创建 model，store，代理和如何处理数据。同时也看到如何使用 Go 语言创建一个简单的 REST 服务。

Python常用模块 之 jsonpath-ng：更简单的解析json数据
孤寒者的博客
11-04 1万+
Python常用模块 之 jsonpath：更简单的解析json数据
第0章 环境搭建汇总
最新发布
Eclipse_2019的博客
08-07 912
min商城项目中所用到的所有技术组件的安装部署
Ext JS 6 By Example(PACKT,2015)
09-09
Ext JS is one of the most famous JavaScript frameworks used to create rich interactive web applications using techniques such as Ajax, DHTML, JSON, and DOM scripting. It provides a complete rich set of GUI controls, has an excellent API for AJAX and REST, and helps users to organize their code with Model View ViewModel (MVVM) or the MVC architecture, and supports two-way data binding, responsive layouts, responsive design, and more. It is an extensive, one-stop-shop to build an JavaScript RIA application. This book starts with a clear step-by-step installation guide for Ext JS 6 and the additional tools required for development on both Mac and Windows operating systems. It then covers the core concepts and fundamentals of Ext JS 6.
Ext JS 6学习文档-第4章-数据包
weixin_30553837的博客
08-24 227
Ext JS 6学习文档-第4章-数据包 数据包 本章探索 Ext JS 中处理数据可用的工具以及服务器和客户端之间的通信。在本章结束时将写一个调用 RESTful 服务的例子。下面是本章的内容： 模型 Schema Stores 代理 过滤和排序 做一个基于 RESTful 的小项目 Model（模型） 一个模型包含字段，字段类型，校验，关联和代理。它是通过扩展...
Ext JS 6学习文档-第6章-高级组件
weixin_30240349的博客
08-24 185
Ext JS 6学习文档-第6章-高级组件 高级组件 本章涵盖了高级组件，比如 tree 和 data view。它将为读者呈现一个示例项目为 图片浏览器，它使用 tree 和 data view 组件。以下是本章将要讨论的主题： Trees Data views 拖放 图片浏览器 — 一个示例项目 本章的主要目标是探索 tree panel 和 data view 并且...
Ext JS 6学习文档–第2章–核心概念
weixin_30593261的博客
08-24 320
核心概念 在下一章我们会构建一个示例项目，而在这之前，你需要学习一些在 Ext JS 中的核心概念，这有助于你更容易理解示例项目。这一章我们将学习以下知识点： 类系统，创建和扩展类 事件 Ext JS 对象的查询 容器 布局 class system(类系统) Ext JS 提供了很多功能，使得它创建和处理类变得简单。以下是在 Ext JS 6 的类系统中的几大组成类： ...
Ext JS 6学习文档-第8章-主题和响应式设计
weixin_30239339的博客
08-24 178
Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计。主要有以下几点内容： SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 SASS(Syntactically Awesome Stylesheets) 是一个样式语言，当你使用 SASS 代替 CSS 来写样式，之后 SASS 将使用编译器编...
Ext.js 6 示例中文与英文学习文档介绍
从文件名称列表可以看出，有两本示例文档，一本是中文的“Ext.JS6 BY EXAMPLE”，另一本是英文的“Ext.JS6 Learning Document”。这两本文档应该分别提供了大量的示例和练习，以帮助学习者理解和掌握Ext.js 6的使用...
Redis6学习笔记-第二章-Redis6的基本操作
Fatter$hday的博客
06-22 2655
Redis6学习笔记-第二章-Redis6的基本操作
Ext.js事件处理最佳实践：代码重构与优化指南
本文系统地探讨了Ext.js框架下事件处理的核心概念、性能优化、模块化编程、代码重构技巧以及高级技术应用。首先介绍了Ext.js事件处理的基础知识和事件委托机制的理论，然后重点分析了实现高效事件委托的策略和性能...
[pdf]Ext JS 6 By Example
12-03
一本国外牛人写的关于 ExtJS 6 的电子书 [Ext JS 6 By Example]。这份资料在 PACKT上卖 35.99 刀的，讲的很详细，例子也比较简单，容易理解，现我准备利用工作之余翻译这份文档，为自己学习加深理解，也希望能帮助更多的人学习。
Ext JS6 by Example中文版(含源码).rar
06-03
中文资料来源于网络整理，Ext js 6.0 快速入门好文章
ext 中文文档
03-05
博文链接：https://longyi-java.iteye.com/blog/202250
Ext JS 6学习文档-第3章-基础组件
weixin_30271335的博客
08-24 365
Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中，你将学习到一些 Ext JS 基础组件的使用。同时我们会结合所学创建一个小项目。这一章我们将学习以下知识点： 熟悉基本的组件 – 按钮，文本框，日期选择器等等 表单字段的校验 菜单和工具栏 设计一个表单 计算器程序– 本章的示例项目 本章的主要目的是创建一个表单设计和一个计算器示例项目。以下图分别展示了表单...
[Ext JS 6 By Example 翻译] 第3章 - 基础组件
mithi的博客
08-27 96
在本章中，你将学习到一些 Ext JS 基础组件的使用。同时我们会结合所学创建一个小项目。这一章我们将学习以下知识点： 熟悉基本的组件 – 按钮，文本框，日期选择器等等 表单字段的校验 菜单和工具栏 设计一个表单 计算器程序– 本章的示例项目 本章的主要目的是创建一个表单设计和一个计算器示例项目。以下图分别展示了表单设计和计算器设计。 首先，你观察下列表单设计，你会发现我们使用了大量的...
[Ext JS 6 By Example 翻译] 第2章 - 核心概念
mithi的博客
08-27 96
转载自：http://www.jeeboot.com/archives/1217.html 在下一章我们会构建一个示例项目，而在这之前，你需要学习一些在 Ext JS 中的核心概念，这有助于你更容易理解示例项目。这一章我们将学习以下知识点： 类系统，创建和扩展类 事件 Ext JS 对象的查询 容器 布局 class system(类系统) Ext JS 提供了很多功能，...
[Ext JS 6 By Example 翻译] 第5章 - 表格组件(grid)
mithi的博客
08-27 95
本章将探索 Ext JS 的高级组件 grid 。还将使用它帮助读者建立一个功能齐全的公司目录。本章介绍下列几点主题： 基本的 grid 排序 渲染器 过滤 分页 单元格编辑 行编辑 分组 分组 grid（pivot grid） 公司目录 —一个示例项目 grid 组件是 Ext JS 中最强大的一个组件。它有很多的选项和配置，能以任何你希望的形式来构建 grid。 Ext ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值