zoukankan      html  css  js  c++  java
  • [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'
                 }
            }
    });
  • 相关阅读:
    WebService
    jdbc访问数据库
    ssm文件配置
    ssh文件配置
    配置数据源的三种方式和sql心跳的配置
    SQL in与exists
    套接字
    oracle 方向及资料
    ORACLE恢复数据
    SQL时间戳的使用
  • 原文地址:https://www.cnblogs.com/felixfang/p/3184983.html
Copyright © 2011-2022 走看看