ExtJS 4：具有协会和商店的模型 [英] ExtJS 4: Models with Associations and Stores

问题描述

简介

我在ExtJS中的 Ext.data.Model 类面临一个应用程序设计问题。我会尝试将我的想法发展到一个非常常见的在线商店场景，所以你可以跟随我。我真的很感谢任何关于我的想法和结论的评论！

模型

我们假设您要映射每个客户都可以订购多个产品到ExtJS。从简单的单词可以确定这三个模型：客户，订单和产品。在这种情况下，订单是连接客户和
产品 s。

关联

我发现ExtJS实际上允许你指定这个<$使用 Ext.data.HasManyAssociation 和<$（$）$（$） c $ c> Ext.data.BelongsToAssociation 类。但这是什么想要的？你想要一个产品始终属于订单？如果您想要列出产品，而没有任何连接到订单 s

商店

这是更具体的ExtJS的地方。在ExtJS中，您有 Ext.data.Store 来保存所有数据。对我来说，组织我的数据的一种自然的方法是为每个模型都有一个 Ext.data.Store ：

<

CustomerStore

OrderStore

ProductStore

Ext.grid.Panel s并排;一个为每个商店。当在一个网格中选择客户时，他的订单会自动显示在第二个网格中。在第二个格子中选择一个订单时，相关联的产品就会出现在第三个格子中。

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

将它们整合在一起

所以现在我们有三件事我们需要汇总：

1. 模型及其


2. 关联（ hasMany ， belongsTo ）和


3. 数据（存储 s）

可以从Model-Model关系的一边定义关联吗？例如，我可以指定一个订单 hasMany 产品但不要说，产品 belongsTo a 订单？因为产品实际上可能属于多个订单。因此，我指定产品型号 hasMany 订单

以下是ExtJS中的模型：

客户

  Ext.define（'Customer'，{
 extends：'Ext.data.Model'，
 requires： 
'Order'，
]，
 fields：[
 {name：'id'，type：'int'}，
 {name：'lastname'类型：'string'} 
 {name：'firstname'，type：'string'} 
]，
 hasMany：'Order'/ *在每个Customer实例上生成orders（）方法* / 
}）; 
  

订单

 extends：'Ext.data.Model'，
 fields：[
 {name：'id '，键入：'int'}，
 {name：'customer_id'，type：'int'}，/ *指的是这个订单所属的客户* / 
 {name：'date' ，'type'''
]，
 belongsTo：'Customer'，/ *在每个Order实例上生成一个getCustomer方法* / 
 hasMany：'Product'/ *生成一个产品）方法在每个订单实例* / 
}）; 
  

产品

 extends：'Ext.data.Model'，
 fields：[
 {name：'id '，type：'int'}，
 {name：'name'，type：'string'}，
 {name：'description'，type：'string'}，
 { name：'price'，type：'float'} 
]，
 / * 
我没有指定与Order模型的关系
，因为它根本没有
 
它仍然可以工作吗？
 * / 
 hasMany：'Order'
}）; 
  

这里是商店：

CustomerStore

  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'
} 
} 
}）; 
  

OrderStore

 extends：'Ext.data.Store'，
 storeId：'OrderStore'，
 model： 'order'，
 proxy：{
 type：'ajax'，
 url：'data / orders.json'，
 reader：{
 type：'json '，
 root：'items'，
 totalProperty：'total'
} 
} 
}）; 
  

ProductStore

 extends：'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 / 。它使用两个模型和两个商店，但没有关联定义。

提前谢谢你

- 康纳德

解决方案

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

假设我们有Store1，Store2，Model1，Model2，Grid1，Grid2。 Grid1使用Store1，Store1使用Model1，Grid2使用Store2，Store2使用Model2。

到目前为止，所有的工作正在加载，数据正在加载等。 b
$ b

但是现在我们要向Model1添加 hasMany 关联。好的，我们添加到Model1的配置中：

  hasMany：{model：'Model2'，name：'model2'} 
  

此后，您认为可以使用Grid1的 itemclick 通过执行以下操作：

  Grid1.on（'itemclick'，function（view，item_which_uses_model1）{
 //item_which_uses_model1.model2（）应该返回Model2的商店
 item_which_uses_model1.model2（）。load（）; 
} 
  

您期望Grid2中的数据填充在Grid1的 itemclick 中，但没有任何反应，Actualy请求正在发布，响应得到，但Grid2没有填充数据。

一段时间后，您意识到 item_which_uses_model1.model2（） 不是 Store2 。

当Model2看到它与Model1有关联时，它创建了Model1自己的商店是不等于Store2。

这不是很酷，因为Grid2正在使用Store2。

实际上你可以把它例如，添加到Grid2的配置中：

  store：new Model1（）。model2（），
  

但是如果您使用ExtJS mvc模式怎么办？ Grid2不必了解Model1的任何内容。

我不建议使用关联在现实世界的项目。至少现在代替使用方法，如您的示例所示：Model + Store + Filtering。

Introduction

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!

Models

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.

Associations

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?

Stores

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

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.

Does this sound natural to you? If not, please comment!

Bringing it all together

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

1. Models and their
2. Associations (hasMany, belongsTo) and the
3. Data (Stores)

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.

Here are the models in ExtJS:

Customer

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 */
});

Order

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 */
});

Product

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'
});

And here are the stores:

CustomerStore

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'
        }
    }
});

OrderStore

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'
        }
    }
});

ProductStore

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'
        }
    }
});

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.

Thank you in advance

-Konrad

解决方案

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

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.

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

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

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();
}

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.

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

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

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

store: new Model1().model2(),

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

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屋！