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

[EXT JS]"hasMany" association on ExtJS 4.1.1a的更多相关文章

  1. sencha ext js 6 入门

    Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...

  2. Ext Js详解指南

    什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript.HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果. 个人总结Ext ...

  3. [Ext JS 4] Extjs 它 initComponent 和 constructor差分

    initComponent 和 constructor是什么 Extjs 提供的组件还是挺丰富的, 可是有时候需求更丰富. 当Extjs 原生的组件无法实现我们的要求的时候, 就须要扩展Extjs 的 ...

  4. Ext JS 6学习文档–第1章–ExtJS入门指南

    Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...

  5. 【转载】《Ext JS 4 First Look》翻译之一:新特性

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:^_^肥仔John      原文地址:http://www.cnblogs. ...

  6. Ext.js基础

    第一章:Ext.js基础 好书推荐 Javascript设计模式 征服ajax web 2.0开发技术详解 简介 基础要求 了解HTML.CSS.熟练JS.JS的OOP.AJAX JSP/PHP/AS ...

  7. Ext JS - 问答

    Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...

  8. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  9. CDH5X 安装oozie报错To enable Oozie web console install the Ext JS library.

    最近在CDH5.X 安装oozie 服务,服务安装完毕,访问oozie server ui,报如下错误: 页面提示: Oozie web console is disabled.To enable O ...

随机推荐

  1. maven 教程二 深入

    一:编写POM <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...

  2. BZOJ 4176 Lucas的数论 莫比乌斯反演+杜教筛

    题意概述:求,n<=10^9,其中d(n)表示n的约数个数. 分析: 首先想要快速计算上面的柿子就要先把d(ij)表示出来,有个神奇的结论: 证明:当且仅当a,b没有相同的质因数的时候我们统计其 ...

  3. 在Excel里面,单元格里输入公式后只显示公式本身,不显示结果,怎么办

    这种情况是对Excel进行了设置,设置的就是在单元格中只显示公式,不显示结果,解决的办法有两个: 1 用快捷键CTR+~ 2 点击"公式"选项卡,然后反选里面的"显示公式 ...

  4. Python练习—循环

    1.输入n的值,求出n的阶乘. s=1 n = int(input("请输入一个数")) for i in range(1,n+1): s=s*i print(s) 2.折纸上月球 ...

  5. BAT批处理(四)

    网络命令 net use \\ip\ipc$ " " /user:" " 建立IPC空链接 net use \\ip\ipc$ "密码" / ...

  6. zookeeper伪集群安装

    记录下zookeeper伪分布式搭建的过程,假设系统已经配置好了JAVA环境. 1.准备环境 linux服务器一台,下载某个版本的zookeeper压缩包,下载链接:http://apache.cla ...

  7. java文件操作(普通文件以及配置文件的读写操作)

    转自:java文件操作(普通文件以及配置文件的读写操作) 读取普通文件 : /** * xiangqiao123欢迎你 如果对代码有疑问可以加qq群咨询:151648295 * * 读取MyFile文 ...

  8. Python运算符与编码

    阅读目录 while 循环 运算符 编码的问题 单位转换 整数 布尔值 while 循环 在生活中,我们遇到过循环的事情吧?比如循环听歌.在程序中,也是存才的,这就是流程控制语句 while 1.基本 ...

  9. BER-TLV数据结构

    本文是自身在研究学习过程中碰到的问题,整理而成. 为了便于后文的引用说明,先列出一段TLV结构的数据: [6F] 4D │ ├─[] A0000003330101 │ ├─[A5] │ │ ├─[] ...

  10. 转:关于Latent Dirichlet Allocation及Hierarchical LDA模型的必读文章和相关代码

    关于Latent Dirichlet Allocation及Hierarchical LDA模型的必读文章和相关代码 转: http://andyliuxs.iteye.com/blog/105174 ...