ExtJS 4:具有关联和商店的模型

Question

介绍

我Ext.data.Model在ExtJS中遇到了类的应用程序设计问题.我会尝试将我的想法发展到一个非常常见的在线商店场景,所以你可以关注我.我非常感谢对我的想法和结论的任何评论!

楷模

假设您想要将" 每个客户可以订购多个产品 " 的事实映射到ExtJS.从裸露的话可以鉴定涉及这三种模式:Customer,Order,和Product.在Order这种情况下就是连接CustomerS和 Product秒.

协会

我发现ExtJS实际上允许您(Customer)1-n(Order)1-n(Product)使用Ext.data.HasManyAssociation和Ext.data.BelongsToAssociation类指定此关系.但这是人们想要的吗？你想要一个Product永远属于一个Order？如果你想要一个Product没有任何连接的s 列表Order怎么办？

商店

这是它更具特定的ExtJS的地方.在ExtJS中,您可以Ext.data.Store保存所有数据.对我来说,组织我的数据的一种自然方式是Ext.data.Store为每个模型设置一个:

1. CustomerStore
2. OrderStore
3. ProductStore

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

这对你来说听起来很自然吗？如果没有,请评论!

将它们整合在一起

所以现在我们需要把三件事情放在一起:

1. 模特和他们的
2. 关联(hasMany,belongsTo)和
3. 数据(StoreS)

是否可以仅从模型 - 模型关系的一侧定义关联？例如,我可以指定一个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'
});

以下是商店:

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

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

先感谢您

-Konrad

Answer 1

康拉德.我最近遇到了处理Models+Associations+Stores.这不是很愉快的经历.这是我学到的:

假设我们有Store1,Store2,Model1,Model2,Grid1,Grid2.Grid1使用Store1,Store1使用Model1,类似Grid2使用Store2,Store2使用Model2.

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

但现在我们要添加hasMany与Model1的关联.好的,我们正在添加到Model1的配置:

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

在此之后,您认为可以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.但没有任何反应.正在发布Actualy请求,得到答复.但是Grid2没有填充数据.
过了一段时间,你意识到这item_which_uses_model1.model2() 不是 Store2.

当Model2"看到"它与Model1有关联时,它会创建Model1自己的商店,它不等于Store2.

它并不酷,因为Grid2正在使用Store2.

Actualy你可以通过例如添加到Grid2的配置来破解它:

store: new Model1().model2(),

但是如果你使用的是ExtJS mvc模式呢？Grid2不必了解Model1的任何信息.

我不建议使用associations在现实世界中的项目.至少现在.而是使用示例中显示的方法:Model + Store + Filtering.

Answer 2

这一切在ExtJS 4中运行良好,第一次很难正确.好吧,前几次.

是的,您可以避免指定子项的belongsTo关联,并仍然在Has Many关系中使用它.

在我的项目中,我们有许多模型,许多模型具有深厚的关系,而且效果很好.

关于许多关系,你应该有

客户 - <CustomerOrder> - 订单

这是三个型号,

或者你可以通过在服务器上做一堆工作假装客户HasMany订单来"伪造"它.嵌套的json可以在这里提供帮助.