ExtJS 4: Модели с ассоциациями и хранилищами

Введение

Я столкнулся с проблемой дизайна приложения с классом Ext.data.Model в ExtJS. Я постараюсь развить свои идеи до очень распространенного сценария интернет-магазина, чтобы вы могли следовать за мной. Буду очень признателен за любые комментарии к моим мыслям и выводам!

Модели

Предположим, вы хотите отобразить тот факт, что « Каждый покупатель может заказать несколько продуктов » в ExtJS. Простыми словами можно определить эти три задействованные модели: Заказчик , Заказ и Продукт .Заказ в данном случае - это то, что связывает клиентов и Продукт s.

Ассоциации

Я обнаружил, что ExtJS на самом деле позволяет вам указать это отношение (Клиент) 1-n (Заказ) 1-n (Продукт) с помощью Классы Ext.data.HasManyAssociation и Ext.data.BelongsToAssociation . Но разве этого хотят? Хотели бы вы, чтобы Продукт всегда принадлежал к Заказу ? Что, если вы хотите иметь список Product s без какой-либо связи с Order s как бы то ни было?

Stores

Вот где он более специфичен для ExtJS. В ExtJS у вас есть Ext.data.Store для хранения всех ваших данных. Для меня естественный способ организации данных - иметь Ext.data.Store для каждой из моих моделей:

  1. CustomerStore
  2. OrderStore
  3. ProductStore

Рассмотрите возможность создания трех Ext.grid.Panel рядом; по одному на каждый магазин. При выборе покупателя в одной сетке его заказы автоматически отображаются во второй сетке. При выборе заказа во второй сетке соответствующие продукты появляются в третьей.

Вам это кажется естественным? Если нет, прокомментируйте!

Собираем все вместе

Итак, теперь у нас есть три вещи, которые нам нужно объединить:

  1. Модели и их
  2. ассоциации ( hasMany , ] ownTo ) и
  3. Data ( Store s)

Можно ли определить ассоциацию только с одной стороны отношения модель-модель? Например, могу ли я указать, что заказ имеетMany Product , но не указывать, что продукт принадлежит к и заказу ? Поскольку Продукт может фактически принадлежать более чем одному Заказу . Поэтому я указываю, что модель Product имеетMany Order s ниже.

Вот модели в 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'
});

А вот магазины:

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/ 23 мая / extjs-load-grid-from-another-grid / . Он использует две модели и два магазина, но нет никаких ассоциаций.

Заранее благодарю

-Конрад

32
задан Konrad Kleine 8 July 2011 в 10:16
поделиться