extjs - ExtJS 4:具有关联和存储的模型

Question

介绍

我在ExtJS中遇到Ext.data.Model类的应用程序设计问题。我将在这里尝试将我的想法发展成非常普遍的在线商店方案，以便您可以关注我。我非常感谢任何对我的想法和结论的评论!

楷模

假设您想将“每个客户都可以订购多个产品”这一事实映射到ExtJS。从裸词中可以识别出涉及的这三个模型:Customer，Order和Product。在这种情况下，Order是连接Customer和Product。

社团协会

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

专卖店

这是ExtJS特有的。在ExtJS中，您可以使用Ext.data.Store保存所有数据。对我来说，组织数据的一种自然方法是为每个模型都提供一个Ext.data.Store:

CustomerStore

OrderStore

ProductStore

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

听起来自然吗？如果没有，请发表评论!

汇集全部

因此，现在我们需要将三件事整合在一起:

模型及其

关联(hasMany，belongsTo)和

数据(Store)

是否可以仅从模型-模型关系的一侧定义关联？例如，我可以指定 Order hasMany Product，但忽略 Product belongsTo和 Order吗？因为 Product实际上可以属于多个 Order。因此，我在下面指定 Product模型 hasMany Order。

这是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/的示例(不是我的示例)。它使用两个模型和两个存储，但是没有定义关联。

先感谢您

-康拉德

Answer 1

康拉德我最近面对Models+Associations+Stores。这不是很愉快的经历。这是我所学到的:

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

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

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

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

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

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

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

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

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

实际上，您可以通过添加到Grid2的配置中来对其进行破解:

store: new Model1().model2(),

但是，如果您使用的是ExtJS mvc模式，该怎么办。 Grid2不必了解有关Model1的任何信息。

我 不建议在实际项目中使用associations使用。至少现在。而是使用示例中显示的方法:“模型+存储+过滤”。