[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'
}
}
});
[EXT JS]"hasMany" association on ExtJS 4.1.1a的更多相关文章
- sencha ext js 6 入门
Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...
- Ext Js详解指南
什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript.HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果. 个人总结Ext ...
- [Ext JS 4] Extjs 它 initComponent 和 constructor差分
initComponent 和 constructor是什么 Extjs 提供的组件还是挺丰富的, 可是有时候需求更丰富. 当Extjs 原生的组件无法实现我们的要求的时候, 就须要扩展Extjs 的 ...
- Ext JS 6学习文档–第1章–ExtJS入门指南
Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...
- 【转载】《Ext JS 4 First Look》翻译之一:新特性
免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:^_^肥仔John 原文地址:http://www.cnblogs. ...
- Ext.js基础
第一章:Ext.js基础 好书推荐 Javascript设计模式 征服ajax web 2.0开发技术详解 简介 基础要求 了解HTML.CSS.熟练JS.JS的OOP.AJAX JSP/PHP/AS ...
- Ext JS - 问答
Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...
- 《Ext JS模板与组件基本知识框架图----模板》
最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...
- 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 ...
随机推荐
- POJ 3028 Shoot-out(概率DP)
Description This is back in the Wild West where everybody is fighting everybody. In particular, ther ...
- centos配置iptables
第一次配置前消除默认的规则 #这个一定要先做,不然清空后可能会悲剧 iptables -P INPUT ACCEPT #清空默认所有规则 iptables -F #清空自定义的所有规则 iptable ...
- 采用c#实现功能1
看了好多c#的菜鸟教程不如自己开始动手打代码,最终实现了功能一,参考了网上的wordcount代码发现无论是c++还是c#大部分采用的是哈希表的方法实现的,本来还想仅用循环实现遍历句子中的所有字符,即 ...
- ACM 第十二天
博弈论(巴什博奕,威佐夫博弈,尼姆博弈,斐波那契博弈,SG函数,SG定理) 一. 巴什博奕(Bash Game): A和B一块报数,每人每次报最少1个,最多报4个,看谁先报到30.这应该是最古老的关 ...
- 《剑指offer》---两个栈实现队列
本文算法使用python3实现 1.题目描述: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 时间限制:1s:空间限制:32768K 2.思路描述: ...
- C++并行编程1
what is concurrency 我们可以一边看电视,一边唱歌.人并行非常容易理解,但是计算机呢?是不是我们一边编辑着word文档,一边听着歌,这样计算机就是在并行吗?不一定欧,如果你计算机是单 ...
- 在 Range 对象中,Min (14)必须小于或等于 max (-1)。
DataTable dt = ds.Tables[]; DataRow[] drs = dt.Select("Id=" + categoryID ); 解决方法:将参数用单引号阔起 ...
- bwapp之xss(blog)
存储型XSS,持久化,代码是存储在服务器中的,如在个人信息或发表文章等地方,加入代码,如果没有过滤或过滤不严,那么这些代码将储存到服务器中,用户访问该页面的时候触发代码执行.这种XSS比较危险,容易造 ...
- 【Linux】- CentOS 防火墙iptables和firewall
1 iptables防火墙 1.1 基本操作 # 查看防火墙状态 service iptables status # 停止防火墙 service iptables stop # 启动防火墙 s ...
- [BinaryTree] 二叉树类的实现
二叉树结点的抽象数据类型: template<class T> class BinaryTreeNode { friend class BinaryTree<T>; priva ...