ExtJS 4:具有关联和存储的模型 [英] ExtJS 4: Models with Associations and Stores

问题描述

我遇到了 ExtJS 中的 Ext.data.Model 类的应用程序设计问题.我将在这里尝试将我的想法发展到一个非常常见的在线商店场景，因此您可以关注我.我真的很感激任何对我的想法和结论的评论！

I'm facing an application design problem with the Ext.data.Model class in ExtJS. I will try to develop my ideas to a very common online store scenario here, so you can follow me. I would really appreciate any comments on my thoughts and conclusions!

假设您想将每个客户可以订购多种产品"这一事实映射到 ExtJS.一言以蔽之，我们可以识别出这三个涉及的模型:Customer、Order 和 Product.在这种情况下，Order 是连接 Customer 和产品s.

Let's suppose you want to map the fact that "Every customer can order multiple products" to ExtJS. From the bare words one can identify these three models involved: Customer, Order, and Product. The Order in this case is what connects Customers and Products.

我发现 ExtJS 实际上允许你使用 Ext.data.HasManyAssociation 指定这个 (Customer)1-n(Order)1-n(Product) 关系和 Ext.data.BelongsToAssociation 类.但这是人们想要的吗?您是否希望 Product 始终属于一个 Order?如果您想要一个 Product 列表而与 Order 没有任何联系怎么办?

I found that ExtJS actually allows you to specify this (Customer)1-n(Order)1-n(Product) relation using the Ext.data.HasManyAssociation and Ext.data.BelongsToAssociation classes. But is this what one wants? Would you want to that a Product always belongs to an Order? What if you want to have a list of Products without any connection to Orders whatsoever?

这是它获得更多 ExtJS 特定的地方.在 ExtJS 中，你有 Ext.data.Stores 来保存你的所有数据.对我来说，组织数据的一种自然方式是为每个模型创建一个 Ext.data.Store:

This is where it get's more ExtJS specific. In ExtJS you have Ext.data.Stores to hold all your data. To me a natural way to organize my data is to have an Ext.data.Store for each of my models:

1. CustomerStore
2. OrderStore
3. ProductStore

考虑将三个 Ext.grid.Panel 并排放置；每个商店一个.在第一个网格中选择客户时，他的订单会自动显示在第二个网格中.在第二个网格中选择订单时，相关产品会出现在第三个网格中.

Consider having a three Ext.grid.Panels side-by-side; one for each store. When selecting a customer in the one grid, his orders automatically show up in the second grid. When selecting an order in the second grid the associated products appear in the third grid.

这听起来自然吗?如果没有，请评论！

所以现在我们需要整合三件事:

So now we have three things that we need to bring together:

1. 模型及其
2. 关联(hasMany、belongsTo)和
3. 数据(Stores)

是否可以仅从模型-模型关系的一侧定义关联?例如，我是否可以指定 Order hasMany Products 但省略 Product belongsTo 一个订单?因为一个Product实际上可以属于多个Order.因此，我指定 Product 模型 hasMany Orders 下面.

Is it possible to define an association only from one side of a Model-Model relation? For instance, can I specify that an Order hasMany Products but leave out that a Product belongsTo an Order? Because a Product can actually belong to more than one Order. Therefore I specify that the Product model hasMany Orders below.

以下是 ExtJS 中的模型:

Here are the models in ExtJS:

Ext.define('Customer', {
    extend   : 'Ext.data.Model',
    requires : [
        'Order',
    ],
    fields   : [
           {name : 'id',          type : 'int'},
           {name : 'lastname',    type : 'string'}
           {name : 'firstname',   type : 'string'}
    ],
    hasMany: 'Order' /* Generates a orders() method on every Customer instance */
});

订购

Ext.define('Order', {
    extend   : 'Ext.data.Model',
    fields   : [
            {name : 'id',          type : 'int'},
            {name : 'customer_id', type : 'int'}, /* refers to the customer that this order belongs to*/
            {name : 'date',        type : 'date'}
    ],
    belongsTo: 'Customer', /* Generates a getCustomer method on every Order instance */
    hasMany: 'Product' /* Generates a products() method on every Order instance */
});

产品

Ext.define('Product', {
    extend   : 'Ext.data.Model',
    fields   : [
            {name : 'id',          type : 'int'},
            {name : 'name',        type : 'string'},
            {name : 'description', type : 'string'},
            {name : 'price',       type : 'float'}
    ],
    /*
        I don't specify the relation to the "Order" model here
        because it simply doesn't belong here.

        Will it still work?
    */
    hasMany: 'Order'
});

这里是商店:

Ext.define('CustomerStore', {
    extend      : 'Ext.data.Store',
    storeId     : 'CustomerStore',
    model       : 'Customer',
    proxy   : {
        type   : 'ajax',
        url    : 'data/customers.json',
        reader : {
            type           : 'json',
            root           : 'items',
            totalProperty  : 'total'
        }
    }
});

订单商店

Ext.define('OrderStore', {
    extend      : 'Ext.data.Store',
    storeId     : 'OrderStore',
    model       : 'Order',
    proxy   : {
        type   : 'ajax',
        url    : 'data/orders.json',
        reader : {
            type           : 'json',
            root           : 'items',
            totalProperty  : 'total'
        }
    }
});

产品商店

Ext.define('ProductStore', {
    extend      : 'Ext.data.Store',
    storeId     : 'ProductStore',
    model       : 'Product',
    proxy   : {
        type   : 'ajax',
        url    : 'data/products.json',
        reader : {
            type           : 'json',
            root           : 'items',
            totalProperty  : 'total'
        }
    }
});

这是一个关于公司及其产品的例子(不是我的)http://superdit.com/2011/05/23/extjs-load-grid-from-another-grid/.它使用两个模型和两个商店，但没有定义关联.

Here is an example (not by me) with companies and their products http://superdit.com/2011/05/23/extjs-load-grid-from-another-grid/ . It uses two Models and two stores but there are no associations define.

提前致谢

-康拉德

推荐答案

Konrad.我最近面临着处理 Models+Associations+Stores 的问题.这不是很愉快的经历.这是我学到的:

Konrad. I recently faced with dealing with Models+Associations+Stores. This wasn't very pleasent experience. Here is what I've learned:

假设我们有 Store1、Store2、Model1、Model2、Grid1、Grid2.Grid1 使用 Store1，Store1 使用 Model1，同样 Grid2 使用 Store2，Store2 使用 Model2.

Let's say we have Store1, Store2, Model1, Model2, Grid1, Grid2. Grid1 uses Store1, Store1 uses Model1 and similarly Grid2 uses Store2, Store2 uses Model2.

到目前为止一切正常，正在加载数据等等.

So far all is working, data is loading and so on.

但是现在我们想要将 hasMany 关联添加到 Model1.好的，我们正在添加到 Model1 的配置中:

But now we want to add hasMany association to Model1. Ok, we are adding to Model1's config:

hasMany: {model: 'Model2', name: 'model2'}

在此之后，您认为可以通过执行以下操作，使用 Grid1 的 itemclick 上的数据填充 Store2:

After this you think that you can populate Store2 with data on Grid1's itemclick by doing something like following:

Grid1.on('itemclick', function(view, item_which_uses_model1){
  //item_which_uses_model1.model2() supposed to return Model2's store
  item_which_uses_model1.model2().load();
}

您期望使用 Grid1 的 itemclick 上的数据填充 Grid2.但什么也没有发生.实际上正在发布请求，得到响应.但是 Grid2 没有填充数据.
一段时间后，您会意识到item_which_uses_model1.model2() 不是 Store2.

You are expecting that Grid2 is populated with data on Grid1's itemclick. But nothing happens. Actualy requests are being posted, responses are gotten. But Grid2 is not populated with data.
And after some time you are realising that item_which_uses_model1.model2() IS NOT Store2.

当模型 2 看到"它与模型 1 有关联时，它会创建模型 1 自己的商店，该商店不等于商店 2.

when Model2 "sees" that it has association with Model1 it creats Model1's own store which is not equal to Store2.

这并不酷，因为 Grid2 正在使用 Store2.

It's not cool, because Grid2 is using Store2.

实际上您可以通过例如添加到 Grid2 的配置来破解它:

Actualy you can hack it by, for example, adding to Grid2's config:

store: new Model1().model2(),

但是如果您使用的是 ExtJS mvc 模式呢?Grid2 不必了解 Model1.

but what if you are using ExtJS mvc pattern. Grid2 doen't have to know anything about Model1.

我不推荐在实际项目中使用associations.至少现在.而是使用示例中显示的方法:模型+存储+过滤.

I don't recommend using associations in real world projects. At least now. Instead use approach which is shown in your example: Model+Store+Filtering.

这篇关于ExtJS 4:具有关联和存储的模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！