[EXT JS]"hasMany" association on ExtJS 4.1.1a

ExtJS uses "hasMany" association to support nested json.

However the sencha docs lacks well organized documents to guide how to use it. The coder has to test a lot to make their model work.

There is a post which pointed some extra "rules" to make the hasMany work.

http://extjs-tutorials.blogspot.co.uk/2012/05/extjs-hasmany-relationships-rules.html

 

In my case, I used Extjs 4.1.1a, after referencing a lot and testing a lot. I got my codes working.

I used hasMany twice, one for reading nested json from existing json file; one for loading json docs from mongodb database.

Model is defined in "model" folder in MVC architecture.

(1) Loading from mongoDB database

Ext.define('App.model.ItemPrice', {
            extend : 'Ext.data.Model',
            idProperty : '_id',
            fields : [{
                        name : '_id',
                        type : 'string'
                    }, {
                        name : 'Category',
                        type : 'string'
                    }, {
                        name : 'SE',
                        type : 'string'
                    }, {
                        name : 'Version',
                        type : 'string'
                    }, {
                        name : 'Unit',
                        type : 'string'
                    }, {
                        name : 'Partname',
                        type : 'string'
                    }, {
                        name : 'OTC',
                        type : 'Number'
                    }, {
                        name : 'MC',
                        type : 'Number'
                    }, {
                        name : 'Currency',
                        type : 'string'
                    }],
            hasMany : {
                name : 'Attributes',
                model : 'App.model.ItemAttribute',
                associationKey : 'Attributes'
            },
            proxy : {
                type : 'rest',
                url : '/itemprices',
                reader : {
                    type : 'json',
                    root : 'prices',
                    successProperty : 'success'
                },
                writer : Ext.create('Ext.data.writer.DeepJson')
            }

        });

Ext.define('App.model.ItemAttribute', {
            extend : 'Ext.data.Model',
            fields : [{
                        name : 'FieldKey',
                        type : 'string'
                    }, {
                        name : 'FieldValue',
                        type : 'string'
                    }]
        });

Store defined:

Ext.define('App.store.ItemPrices', {
    extend: 'Ext.data.Store',

    autoLoad: false,
    autoSync: false,
    model: 'App.model.ItemPrice'
});

One thing needs to be noticed: The "name" and "associationKey" are recommended to be the same, and DO NOT use "field" to be their value. I used to spend 2 hours to find the error, at last I changed "field" to other word, it worked. So I suspected "field" is a keyword which can not be used as the value of "name" and "associationKey" in hasMany.

To read from database, we still need to write the webservice which connects the database and gives API to web client. I used Node.js here.

As pointed in Extjs proxy(see "App.model.ItemPrice"), The web service is "rest", to write this I used "express" module. To implement reading from MongoDB I used "Mongoose" module.

 

var express = require('express'),
    app = module.exports = express();

// MongoDB
var mongoose = require('mongoose'),
    db = mongoose.connect('mongodb://127.0.0.1/IaaSDBG2');

//create the price info Model using the 'pricecatalogue' collection as a data-source
var PriceCatalg = mongoose.model('pricecatalogue', new mongoose.Schema({
        Category: String,
        SE: String,
        Version : String,
        Unit: String,
        Partname: String,
        OTC: Number,
        MC: Number,
        Currency: String,
        Attributes: [{
            FieldKey: String,
            FieldValue: String
        }]
    }));
// Configuration
app.configure(function () {
    //app.set('views', __dirname + '/views');
    //app.set('view engine', 'jade');
    app.use(express.bodyParser());//parse JSON into objects
    app.use(express.methodOverride());
    app.use(app.router);
    app.use(express.static(__dirname + '/IaaSPriceTool'));
});

app.configure('development', function () {
    app.use(express.errorHandler({
        dumpExceptions: true,
        showStack: true
    }));
});

app.configure('production', function () {
    app.use(express.errorHandler());
});

// Routes
app.get('/', function (req, res) {
    res.redirect('/index.html');
});
/*
PriceItem in database GET Express web service
*/
app.get('/itemprices', function (req, res) {
    PriceCatalg.find({}, function (err, compntPrices) {
            res.contentType('json');
            res.json({
                success: true,
                prices: compntPrices
            });
        });
});

app.listen(3000);
console.log("Express server listening on port %d in %s mode", 3000, app.settings.env);

 

 

 

(2) Loading from file

 

Ext.define('App.model.AppConfig', {
            extend : 'Ext.data.Model',

            fields : [{
                        name : 'VERSION',
                        type : 'string'
                    }],
            hasMany : [{
                        name : 'COMPONENTS',
                        model : 'App.model.CompntConfig',
                        associationKey : 'COMPONENTS'
                    }]
        });

 

Ext.define('App.model.CompntConfig', {
            extend : 'Ext.data.Model',
            fields : [{
                        name : 'CATEGORY',
                        type : 'string'
                    },{
                        name : 'SE',
                        type : 'string'
                    },{
                        name : 'UNIT',
                        type : 'string'
                    }],
            hasMany : [{
                        name : 'FIELDS',
                        model : 'App.model.FieldConfig',
                        associationKey : 'FIELDS'
                    }],
            belongsTo: 'App.model.AppConfig'
        });

Ext.define('App.model.FieldConfig', {
            extend : 'Ext.data.Model',
            fields : [{
                        name : 'NAME',
                        type : 'string'
                    }, {
                        name : 'FULLNAME',
                        type : 'string'
                    }],
            belongsTo: 'App.model.CompntConfig'
        });

The store is created dynamically in the Controller.

var ConfigStore = Ext.create('Ext.data.Store', {
       model : 'App.model.AppConfig',
       proxy : {
             type : 'ajax',
             url : "./PriceCatalgJson_V2.0.json",
             reader : {
                  type : 'json'
             }
        }
});