Using two stores. Main data + lookup table

Hi All,

Can't find an example of how to do this anywhere, so thought I'd ask here;

I'm trying to find the correct / best / suggested way to perform what is essentially an SQL JOIN locally. I've been through references, associations and now totally confused.

---

What I am trying to achieve is this;

Table 1 holds the main data records. I will use books as an example;

field : id - unique key

field : title - title of the book

field : author_id - id of author

Table 2 holds a list of authors

field : id - unique key

field : name - authors name

Relationship is Many to One, so that one Author can have many books. (This could just as easily be Customers and Order, or User and Posts etc)

If this was server side a simple join would get me records which included the authors details when selecting a book.

However I'd like to do the association client side to save duplicating the author data on each book record.

---

So far I have two models, two stores and a grid. It feels like store level should be the place to do the association, that way if I bind a grid to the store of books the author name appears as real data and can be filtered on. (If the field is done in a grid renderer I believe that the filter function wont see it?)

I have set up the following example in Fiddle http://ift.tt/1EREEYV

Code:

Ext.define('darkApp.model.Base', {
    extend: 'Ext.data.Model',


    schema: {
        namespace: 'darkApp.model'
    }
});


Ext.define('darkApp.model.BookObject', {
    extend: 'darkApp.model.Base',


    fields: [{
        name: 'id',
        type: 'int',
        critical: true,
        unique: true
    },{
        name: 'Title'
    }, {
        name: 'AuthorID',
        type: 'int',
        reference: 'AuthorObject'
    }]
});


Ext.define('darkApp.model.AuthorObject', {
    extend: 'darkApp.model.Base',


    fields: [
        {
            name: 'id',
            type: 'int',
            critical: true,
            unique: true
        }, {
            name: 'Name'
        }
    ]
});


Ext.define('darkApp.store.Books', {
    extend: 'Ext.data.Store',
    alias: 'Books',


    model: 'darkApp.model.BookObject',


    data: [{
        id:    1,
        Title: 'Book 1',
        AuthorID: 1
    }, {
        id: 2,
        Title: 'Book 2',
        AuthorID: 2
    }, {
        id: 3,
        Title: 'Book 3',
        AuthorID: 1
    }]
});


Ext.define('darkApp.store.Authors', {
    extend: 'Ext.data.Store',


    model: 'darkApp.model.AuthorObject',


    data: [{
        id: 1,
        Name: 'Author 1'
    }, {
        id: 2,
        Name: 'Author 2'
    }, {
        id: 3,
        Name: 'Author 3'
    }]
});




Ext.define('darkApp.view.main.Main', {
    extend: 'Ext.container.Container',
    xtype: 'app-main',


    items: [{
        xtype: 'grid',
        store: {
            xclass: 'darkApp.store.Books'
        },
        columns: [{
            text: 'Book ID',
            dataIndex: 'id'
        },{
            text: 'Title',
            dataIndex: 'Title'
        }, {
            text: 'Authors ID',
            dataIndex: 'AuthorID'
        }, {
            text: 'Authors Name',
            dataIndex: 'AuthorID',
            filter: {
                type: 'string'
            }
        }],
        plugins: [
                {
                    ptype: 'gridfilters'
                }
            ]
    }]
});




Ext.application({
    name: 'Fiddle',


    launch: function() {
        Ext.create("darkApp.view.main.Main", {
            renderTo: Ext.getBody()
        });
    }
});

Anyone help? I can't help feeling I've missed something obvious :-)

Mark

Using two stores. Main data + lookup table