Ext JS 4倒计时：数据包

One of the areas that has seen the most improvement in Ext JS 4 is the data package. The data package enables you to retrieve, decode and use data in your applications. The data package has been completely rewritten for version 4, but it uses the same approach as previous versions. Today we’re going to take a look at the new data package and see what it offers.

数据包在某种意义上来说是Ext JS 4中最完善的地方。数据包可以让你的应用程序对数据进行复用、解码和输出。在Ext JS 4中，数据包已经被重写，但它的使用方法与以前版本的一样。今天，我们将介绍新的数据包，看看它能为我们提供什么。

新特性

The data package in Ext JS 4 consists of 43 classes, but there are three that are more important than all others – Model, Store and Proxy. These are used by almost every application, and are supported by a number of satellite classes:

Ext JS 4的数据包包含43个类，但有Model 、Store和Proxy相对其它类来说相当重要，这几乎是每一个应用程序都要用到的，而且它有一些卫星类支持。

Models类和Store类

The centerpiece of the data package is Ext.data.Model. A Model represents some type of data in an application – for example an e-commerce app might have models for Users, Products and Orders. At its simplest a Model is just a set of fields and their data. Anyone familiar with Ext JS 3 will have used Ext.data.Record, which was the precursor to Ext.data.Model. Let’s look at how we create a model now:

数据包的核心是Ext.data.Model对象。一个模型就代表一个应用程序中的数据类型，例如一个电子商务应用程序可能包含用户、产品和订单等模型。最简单的一个模型只是一个字段和他么数据的集合。任何使用过Ext JS 3的人都会使用到Ext.data.Record，这就是Ext.data.Model的前身。让我们来看看如何创建一个模型：

1	Ext . regModel ( ' User ' , {
2	fields : [
3	{ name : ' id ' , type : ' int ' } ,
4	{ name : ' name ' , type : ' string ' }
5	]
6	} ) ;

Models are typically used with a Store, which is basically a collection of Model instances. Setting up a Store and loading its data is simple:

模型通常使用于Store，基本上是一个模型实例的集合。Store的定义和加载很简单，代码如下：

1	new Ext . data . Store ( {
2	model : ' User ' ,
3	proxy : {
4	type : ' ajax ' ,
5	url : ' users . json ' ,
6	reader : ' json '
7	} ,
8	autoLoad : true
9	} ) ;

That’s all we need to do to load a set of User model instances from the url ‘users.json’. We configured our Store to use an AjaxProxy, telling it the url to load data from and the Ext.data.Reader class used to decode the data. In this case our server is returning json, so we’ve set up a JsonReader to read the response.

代码中，我们从“users.json”加载了一个用户模型实例。在Store中，我们定义了一个Ajaxproxy，需要为它指定url以加载数据的地址，还要指定Ext.data.Reader解码数据的方式、例子中，服务器将返回json数据，因而我们需要使用JsonReader读取数据。

Stores are able to perform sorting, filtering and grouping locally, as well as supporting remote sorting, filtering and grouping. With Ext JS 4, there is no longer a separate GroupingStore – we can now do multi-sorting, filtering and grouping inside a standard Store:

Store不但支持本地排序、筛选和分组，也支持远程排序、筛选和分组。在Ext JS 4中，不再使用GroupingStroe，我们在标准的Store中就可以实现多列排序、筛选和分组：

1	new Ext . data . Store ( {
2	model : ' User ' ,
3
4	sorters : [ ' name ' , ' id ' ] ,
5	filters : {
6	property : ' name ' ,
7	value : ' Ed '
8	} ,
9	groupers : {
10	property : ' age ' ,
11	direction : ' ASC '
12	}
13	} ) ;

In the store we just created, the data will be sorted first by name then id; it will be filtered to only include Users with the name ‘Ed’ and the data will be grouped by age. It’s easy to change the sorting, filtering and grouping at any time through the Store API.

在代码中，数据将首先根据“name”字段排序，然后再按“id”排序；数据将筛选出“name”字段为“Ed”的数据，并对其按“age”字段进行分组。通过Store API，你可以在任何时间轻松地对数据进行排序、筛选和分组。

Proxies

We saw above how Store uses a Proxy to load its data, and how that Proxy could in turn be configured with a Reader to decode the server response. One structural change in Ext JS 4 is that Store no longer has a direct link to Reader and Writer – these are now handled by the Proxy. This gives us an enormous benefit – Proxies can now be defined directly on a Model:

从上面的代码中可以看到，Store通过Proxy来加载数据以及在Proxy中定义的Reader对服务器返回的数据进行解码。Store在Ext JS 4中一个结构性的变化就是不再直接关联Reader和Writer，这些都将由Proxy处理。这带给了我们一个好处，就是在Model中可以直接定义Proxies：

1	Ext . regModel ( ' User ' , {
2	fields : [ ' id ' , ' name ' , ' age ' ] ,
3	proxy : {
4	type : ' rest ' ,
5	url : ' / users ' ,
6	reader : {
7	type : ' json ' ,
8	root : ' users '
9	}
10	}
11	} ) ;
12
13	// uses the User Model's Proxy
14	new Ext . data . Store ( {
15	model : ' User '
16	} ) ;

This helps us in two ways. First, it’s likely that every Store that uses the User model will need to load its data the same way, so we avoid having to duplicate the Proxy definition for each Store. Second, we can now load and save Model data without a Store:

这带来了两个好处。第一，因为每个使用User模型的Store都使用同一方式加载数据，从而避免了为每个Sotre重复定义Proxy。第二，现在我们不需要通过Store，就可以直接在模型中加载和保存数据了：

1	// gives us a reference to the User class
2	var User = Ext . getModel ( ' User ' ) ;
3
4	var ed = new User ( {
5	name : ' Ed Spencer ' ,
6	age : 25
7	} ) ;
8
9	// we can save Ed directly without having to add him to a Store first because we
10	// configured a RestProxy this will automatically send a POST request to the url /users
11	ed . save ( {
12	success : function ( ed ) {
13	console . log ( " Saved Ed! His ID is " + ed . getId ( ) ) ;
14	}
15	} ) ;
16
17	// load User 123 and do something with it (performs a GET request to /users/123)
18	User . load ( 123 , {
19	success : function ( user ) {
20	console . log ( " Loaded user 123: " + user . get ( ' name ' ) ) ;
21	}
22	} ) ;

We’ve also introduced some brand new Proxies that take advantage of the new capabilities of HTML5 – LocalStorageProxy and SessionStorageProxy. Although older browsers don’t support these new HTML5 APIs, they’re so useful that we know a lot of applications will benefit enormously from their presence. And if we don’t have a Proxy that matches your needs it’s easy to create your own.

在这里我们需要介绍一下采用HTML 5新功能的代理LocalStorageProxy和SessionStorageProxy。尽管旧的浏览器不支持这些HTML 5的API,但它们非常有用，但它们的存在，会让我们获益良多。如果没有符合你要求的proxy，你可以轻松的创建你需要的Proxy。

模型关联

Proxies aren’t the only new capability added to Models; we can now link Models together with the new Associations API. Most applications deal with many different Models, and the Models are almost always related. A blog authoring application might have models for User, Post and Comment. Each User creates Posts and each Post receives Comments. We can express those relationships like so:

在模型中定义Proxy不是唯一的新功能，我们现在还可以通过关联API将模型关联起来。大多数应用程序会处理许多不同的模型，而且模型之间是相关的。譬如，一个博客应用包括用户、发布和评论等模型。每个用户发布的文章及它的评论，我们可以这样表达它们之间的关系：

1	Ext . regModel ( ' User ' , {
2	fields : [ ' id ' , ' name ' ] ,
3
4	hasMany : ' Posts '
5	} ) ;
6
7	Ext . regModel ( ' Post ' , {
8	fields : [ ' id ' , ' user_id ' , ' title ' , ' body ' ] ,
9
10	belongsTo : ' User ' ,
11	hasMany : ' Comments '
12	} ) ;
13
14	Ext . regModel ( ' Comment ' , {
15	fields : [ ' id ' , ' post_id ' , ' name ' , ' message ' ] ,
16
17	belongsTo : ' Post '
18	} ) ;

It’s easy to express rich relationships between different Models in your application. Each Model can have any number of associations with other Models and your Models can be defined in any order. Once we have a Model instance we can easily traverse the associated data – for example, if we wanted to log all Comments made on each Post for a given User, we can do something like this:

这很容易表达出您的应用程序的不同模型之间的复杂关系。每一个模型不单可以拥有许多关联模型，而且与它们的定义顺序无关。一旦我们有一个模型实例，我们就可以很容易地遍历相关数据。 例如，如果我们想输出一个用户的全部文章的评论，我们可以这样做：

1	// loads User with ID 123 using User's Proxy
2	User . load ( 123 , {
3	success : function ( user ) {
4	console . log ( " User: " + user . get ( ' name ' ) ) ;
5
6	user . posts ( ) . each ( function ( post ) {
7	console . log ( " Comments for post: " + post . get ( ' title ' ) ) ;
8
9	post . comments ( ) . each ( function ( comment ) {
10	console . log ( comment . get ( ' message ' ) ) ;
11	} ) ;
12	} ) ;
13	}
14	} ) ;

Each of the hasMany associations we created above results in a new function being added to the Model. We declared that each User model hasMany Posts, which added the user.posts() function we used in the snippet above. Calling user.posts() returns a Store configured with the Post model. In turn, the Post model gets a comments() function because of the hasMany Comments association we set up.

每当定义一个hasMany关联的时候，我们都将在模型内增加一个新函数。因为我们在User模型和Posts模型中定义hasMany关联，所以在User模型中增加了上面代码中的user.posts()函数。调用user.posts()将返回一个使用Post模型的Store。同样，因为Post模型和Comments模型建立了hasMany关联，所以在Post模型中可以使用comments函数。

You may be wondering why we passed a ‘success’ function to the User.load call but didn’t have to do so when accessing the User’s posts and comments. All data is assumed to be loaded asynchronously because it usually has to be loaded from a server somewhere. This usually means passing in callbacks that are called when the data has been loaded, as with the ‘success’ function above.

你可能很奇怪，为什么在User.load中需要使用“success”函数，而在post和comments函数中不需要？这是因为所有数据都被假定为从服务器上异步加载的。这意味着当所有数据都已经被加载时，才会回调上面代码的“success”函数。

加载嵌套数据

By setting up associations as we did above, the framework can automatically parse out nested data in a single request. Instead of making a request for the User data, another for the Posts data and then yet more requests to load the Comments for each Post, we can return all of the data in a single server response like this:

当我们在建立上面的关联时，框架会自动分析出单个请求中的嵌套数据。譬如我们请求一个User数据，它的Post数据以及每个Post数据的Comments数据都会从一个服务器请求中返回，数据形式如下：

1	{
2	id : 1
3	name : ' Ed ' ,
4	posts : [
5	{
6	<span 分享到： Asp.net MVC 3实例学习之ExtShop（五）— ... | Asp.net MVC 3实例学习之ExtShop（三）— ... 2011-01-22 14:31 浏览 497 评论(0) 查看更多 相关推荐 Practical Ext JS 4.pdf Chapter 4: Controls and Layout Chapter 5: Working with Data Chapter 6: Data Controls Chapter 7: Drag and Drop Chapter 8: Theming and Styling Chapter 9: MVC with Ext JS 4 Chapter 10: Extending, Unit ... Ext.JS.4.First.Look(第1版) Ext JS 4 is a JavaScript framework that provides resources to build Rich Internet Applications with great performance. Ext JS 4 has been packed with many new features and it is difficult to master, ... ext4环境搭建 基于vs2012的ext4开发环境搭建， ext4解压工具和操作方法.rar 包含3个工具：make_ext4fs、simg2img、kusering.sh。 1. 解压system.img为system.img.ext4。命令：simg2img system.img system.img.ext4 2. 创建system.img.ext4挂载目录tmp； 命令：mkdir tmp； 3. 挂载system.... [Ext JS] Ext JS 实战 第2版 英文版 ll learn the best practices for building and scaling full featured web applications including how to customize and build Ext widgets Fully revised for Ext JS 4 0 ☆ 出版信息：☆ [作者信息] Jesus ... Ext官方中文教程列表 4BTutorial:EXT简介 4 5BTutorial:Ext 2简述 15 6BTutorial:EXT新手建议 27 EXT新手建议：建立自己的工具箱（Toolkit） 27 7BTutorial:怎么轻松地进入Ext的世界 28 8BTutorial:Javascript中的作用域（scope）是什么?... Ext JS 7.6.0.41 SDK # Sencha Ext JS This is the Sencha Ext JS Framework Package, or just "ext" for short. Release Notes for Ext JS 7.6.0 Release Date: Thu Apr 28 2022 Version Number: 7.6.0.41 Learning Ext JS 4 pdf Learning Ext JS 4 by Crysfel Villa and Armando Gonzalez (Oct 8, 2012) $49.99 Paperback Order in the next 13 hours and get it by Tuesday, Mar 19. More Buying Choices - Paperback $46.48 new (17 ... Ext4新概念：类系统 Ext4新概念：类系统 深入浅出Ext.JS （4） ext js是一种用javascript编写的功能强大的ajax框架，可用于开发绚丽多彩的富客户端ajax应用。本书是ext js领域内的经典著作，由浅入深、循序渐进地对ext js各方面的知识进行了全面而系统的阐述。全书由一个可以引领... Practical Ext JS 4 After a quick refresher on some JavaScript basics, you will get to grips with Ext JS 4’s OO concepts (such as mixins) and familiarize yourself with its UI components and layout. You'll learn all the... EXT JS 4自学手册 EXTjs4自学手册.docx，适用用新手学习EXT JS 4 EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档 EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档... ExtJS和Sencha touch可用到的倒计时插件 用于ExtJS和sencha touch中用到的倒计时插件 快意编程EXT JS Web开发技术详解.part3 《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述，然后通过一个简单的示例带领读者快速入门，在读者对Ext JS有了初步印象后，又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS... 深入浅出Ext JS第2版.pdf下载地址 深入浅出Ext JS第2版.pdf(4/4):http://download.csdn.net/source/3554013 深入浅出Ext JS第2版.pdf(3/4):http://download.csdn.net/source/3554012 深入浅出Ext JS第2版.pdf(2/4):... Ext JS权威指南 全书一共22章：第1章简要介绍了学习ext js必备的基础知识、json、ext js 4的新特性，以及其开发工具的获取、安装与配置；第2章介绍了ext js 4的获取、ext js库的配置与使用、语法、本地化，以及一个经典的入门示例；... Ext-datatimefield日期与时间选择器精确至时分秒 1.此控件支持Ext3.2及以上版本 2.用法与Ext.form.DateField一样，xtype:'datetimefield' 3.不需要导入css或其他js 4.解决某些插件导入会显示对象未定义问题 [ExtJS] Ext JS 4 学习指南 (英文版) [Packt Publishing] Ext JS 4 学习指南 (英文版) [Packt Publishing] Learning Ext JS 4 (E-Book) ☆ 出版信息：☆ [作者信息] Crysfel Villa, Armando Gonzalez [出版机构] Packt Publishing [出版日期] 2013... Global site tag (gtag.js) - Google Analytics