ExtJS 4 官方指南数据 Data 简体中文版.docx

1、ExtJS 4 官方指南数据 Data 简体中文版ExtJS 4 官方指南翻译：数据Data数据包加载并保存您的应用程序中的所有数据。它包括41类，但其中有三个，比其他的都重要-Model,Store和Ext.data.proxy.Proxy。这些几乎每一个应用程序都会用到。这三个类还有些支持的卫星类：The data package is what loads and saves all of the data in your application and consists of 41 classes, but there are three that are more important

2、 than all the others -Model,StoreandExt.data.proxy.Proxy. These are used by almost every application, and are supported by a number of satellite classes:1 模型和存储Models and Stores数据包的核心是Ext.data.Model。Model代表应用程序中的一些类型数据-例如一个电子商务应用程序可能会有Users, Products 和 Orders模型。最简单的一个模型仅仅是一个字段和他们的数据。我们要看看模型的四个主要部分Fi

3、elds,Proxies,Associations和ValidationsThe centerpiece of the data package isExt.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. Were goi

4、ng to look at four of the principal parts of Model Fields,Proxies,AssociationsandValidations.让我们看看怎么创建一个Model：Lets look at how we create a model now:Ext.define(User, extend:Ext.data.Model, fields: name:id, type:int, name:name, type:string);Models通常会用到Store，Store基本上是Models实例的一个集合。建立一个Store和加载其数据很简单：M

5、odels are typically used with a Store, which is basically a collection of Model instances. Setting up a Store and loading its data is simple:Ext.create(Ext.data.Store, model:User, proxy: type:ajax, url :users.json, reader:json, autoLoad:true);我们配置Store使用Ajax Proxy，告诉它加载数据的URL，并用一个Reader解析数据。在这种情况下，我

6、们的服务器返回JSON，所以我们创建一个JSON Reader来读取响应。Store从URL users.json中自动加载User model实例集合。 users.json URL应该返回一个JSON字符串，看起来像这样：We configured our Store to use anAjax Proxy, telling it the url to load data from and theReaderused to decode the data. In this case our server is returning JSON, so weve set up aJson Rea

7、derto read the response. The store auto-loads a set of User model instances from the urlusers.json. Theusers.jsonurl should return a JSON string that looks something like this: success:true, users: id:1, name:Ed, id:2, name:TommySimple Store例子里有现场演示。For a live demo please see theSimple Storeexample.

8、2 内联数据Inline dataStore也可以载入内联的数据。在内部，Store转换每个作为data（数据）传递到Model实例的对象：Stores can also load data inline. Internally, Store converts each of the objects we pass in asdataintoModelinstances:Ext.create(Ext.data.Store, model:User, data: firstName:Ed, lastName:Spencer, firstName:Tommy, lastName:Maintz, fi

9、rstName:Aaron, lastName:Conran, firstName:Jamie, lastName:Avins);Inline Data例子Inline Data example3 排序和分组Sorting and GroupingStores能够执行本地排序、过滤和分组，以及支持远程排序，过滤和分组：Stores are able to perform sorting, filtering and grouping locally, as well as supporting remote sorting, filtering and grouping:Ext.create(

10、Ext.data.Store, model:User, sorters:name,id, filters: property:name, value :Ed, groupField:age, groupDir:DESC);在我们刚刚创建的Store中，数据将首先由名称，然后由ID进行排序，它会过滤为只包括name为“Ed”的数据，并且数据按照年龄分组降序排列。通过Store API很容易在任何时间改变排序，过滤和分组。现场演示，请参阅Sorting Grouping Filtering Store例子。In the store we just created, the data will be

11、 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 in descending order. Its easy to change the sorting, filtering and grouping at any time through the Store API. For a live demo, see theSorting Grouping Filtering Storeexample

12、.4 代理Proxies代理用于Store，处理载入和保存模型数据。有两种类型的代理：客户端和服务器端。客户端代理的例子包括在浏览器的内存和HTML 5的本地存储功能可用时。服务器端代理封装处理一些远程服务器数据，其中包括Ajax，Json和Rest。Proxies are used by Stores to handle the loading and saving of Model data. There are two types of Proxy: Client and Server. Examples of client proxies include Memory for stor

13、ing data in the browsers memory and Local Storage which uses the HTML 5 local storage feature when available. Server proxies handle the marshaling of data to some remote server and examples include Ajax, Json and Rest.代理可以在Model中直接定义，像这样：Proxies can be defined directly on a Model like so:Ext.define(

14、User, extend:Ext.data.Model, fields:id,name,age,gender, proxy: type:rest, url :data/users, reader: type:json, root:users);/ Uses the User Models ProxyExt.create(Ext.data.Store, model:User);这在两个方面有助于我们。首先，很可能每个使用User model的Stroe都需要以同样的方式加载数据，这样就使我们避免重复定义每个Stroe的Proxy。第二，我们现在不需要Store就可以载入和保存模型Model：Th

15、is helps us in two ways. First, its 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:/ Gives us a reference to the User classvarUs

16、er=Ext.ModelMgr.getModel(User);var ed =Ext.create(User, name:Ed Spencer, age :25);/我们能直接保存Ed，而不用把他先加到Store里。/因为我们配置的RestProxy会自动发POST消息到url /users/We can save Ed directly without having to add him to a Store first because we/ configured a RestProxy this will automatically send a POST request to the

17、url /usersed.save( success:function(ed) console.log(Saved Ed! His ID is + ed.getId(););/ Load User 1 and do something with it (performs a GET request to /users/1)User.load(1, success:function(user) console.log(Loaded user 1: + user.get(name););也有利用HTML5新功能优势的代理，-LocalStorage和SessionStorage。虽然旧的浏览器不支

18、持HTML5的这些新API，但是这个技术前景极好。There are also Proxies that take advantage of the new capabilities of HTML5 -LocalStorageandSessionStorage. Although older browsers dont support these new HTML5 APIs, theyre so useful that a lot of applications will benefit enormously from their presence.Example of a Model t

19、hat uses a Proxy directly5 关联AssociationsModels可以用Associations API联系在一起。大多数应用程序处理许多不同的Models，Models几乎都是相关的。一个博客应用程序可能有User，Post和CommentModel。用户可以创建文章，文章可以收到评论。我们可以像这样表达这些关系：Models can be linked together with the Associations API. Most applications deal with many different Models, and the Models are

20、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:Ext.define(User, extend:Ext.data.Model, fields:id,name, proxy: type:rest, url :data/users, reader: typ

21、e:json, root:users, hasMany:Post/ shorthand for model: Post, name: posts );Ext.define(Post, extend:Ext.data.Model, fields:id,user_id,title,body, proxy: type:rest, url :data/posts, reader: type:json, root:posts, belongsTo:User, hasMany: model:Comment, name:comments);Ext.define(Comment, extend:Ext.dat

22、a.Model, fields:id,post_id,name,message, belongsTo:Post);可以很容易地表达您的应用程序中的不同Models之间的丰富关系。每个模型可以有任意数量的Associations与其他Models关联，Models可以按照任何的顺序定义。一旦我们有一个Models的实例，我们可以很容易地遍历相关的数据 - 例如，如果我们想记录每个文章上给定用户的所有评论，我们可以这样做：Its easy to express rich relationships between different Models in your application. Each

23、 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:/ Loads

24、 User with ID 1 and related posts and comments using Users ProxyUser.load(1, success:function(user) console.log(User: + user.get(name); user.posts().each(function(post) console.log(Comments for post: + post.get(title); ments().each(function(comment) console.log(comment.get(message););););在我们上面创建的每一个

25、hasMany关联的结果都会产生一个新的函数添加到Model中。我们定义User model hasMany Posts，会新增user.posts（）函数供我们在上面的代码片段使用。调用guser.posts（）返回Post model的Store配置。反过来，Post model获取comments()函数是因为我们设置的Comments的hasMany关联。Each of the hasMany associations we created above results in a new function being added to the Model. We declared tha

26、t each User model hasMany Posts, which added theuser.posts()function we used in the snippet above. Callinguser.posts()returns aStoreconfigured with the Post model. In turn, the Post model gets acomments()function because of the hasMany Comments association we set up.关联不仅仅用于加载数据 创建新纪录的时候也非常有用：Associa

27、tions arent just helpful for loading data - theyre useful for creating new records too:user.posts().add( title:Ext JS 4.0 MVC Architecture, body:Its a great Idea to structure your Ext JS Applications using the built in MVC Architecture.);user.posts().sync();在这里，我们实例化一个新的Post（文章），user_id字段会自动填充上用户ID。

28、调用sync()通过其配置的Proxy保存新Post - 这又是一个异步操作。如果你想操作完成时发送通知，也可以添加一个回调（callback）。Here we instantiate a new Post, which is automatically given the Users id in the user_id field. Calling sync() saves the new Post via its configured Proxy - this, again, is an asynchronous operation to which you can pass a call

29、back if you want to be notified when the operation completed.belongsTo关联也可以生成新的Model方法，可以这样使用这些方法：The belongsTo association also generates new methods on the model, heres how we can use those:/ get the user reference from the posts belongsTo associationpost.getUser(function(user) console.log(Just go

30、t the user reference from the post: + user.get(name);/ try to change the posts userpost.setUser(100, callback:function(product, operation)if(operation.wasSuccessful() console.log(Posts user was updated);else console.log(Posts user could not be updated););再次，加载函数（getUser）是异步的，需要一个回调函数来获取用户实例。setUser方法只需更新foreign_key（这里是user_id）为100并保存Post model。像往常一样，可以在已完成保存操作时触发回调- 无论成功与否。Once more, the loading function (getUser) is asynchronous and requires a callback function to get at the user instance. The setUser method si