How to represent UML Relations with Backbone-Relational? - backbone.js

I have Class Diagram looking like this :
ModelA 1------* ModelB 1------* ModelC 1------* ModelD
Edit :
The Data looks like that
Data :
{ "Titel" : "ModelA",
"ModelA" : [
{
"Titel" : "ModelB1",
"ModelB1" : [
{
"Titel" : "ModelC1",
"ModelC1":[
{ "Titel" : "ModelD1" },
{ "Titel" : "ModelD2" },
{ "Titel" : "ModelD3" }
},
{
"Titel" : "ModelC2",
"ModelC2":[
{ "Titel" : "ModelD21" },
{ "Titel" : "ModelD22" },
{ "Titel" : "ModelD23" }
},
]
},
{
"Titel" : "ModelB2",
"ModelB2" : [
{
"Titel" : "ModelC1",
"ModelC1":[
{ "Titel" : "ModelD1" },
{ "Titel" : "ModelD2" },
{ "Titel" : "ModelD3" }
},
{
"Titel" : "ModelC2",
"ModelC2":[
{ "Titel" : "ModelD21" },
{ "Titel" : "ModelD22" },
{ "Titel" : "ModelD23" }
},
]
}]
}
I create those RelationalModel :
ModelA :
ModelA = Backbone.RelationalModel.extend({
relations:[{
type: Backbone.HasMany,
key: 'modelb',
relatedModel: 'ModelB',
collectionType: 'ModelBCollection',
reverseRelation:{
key: 'belong To',
includeInJSON: 'id'
}
}] });
ModelB :
ModelB = Backbone.RelationalModel.extend({
relations:[{
type: Backbone.HasMany,
key: 'modelc',
relatedModel: 'ModelC',
collectionType: 'ModelCCollection',
reverseRelation:{
key: 'belong To',
includeInJSON: 'id'
}
}] });
ModelC :
ModelC = Backbone.RelationalModel.extend({
relations:[{
type: Backbone.HasMany,
key: 'modeld',
relatedModel: 'ModelD',
collectionType: 'ModelDCollection',
reverseRelation:{
key: 'belong To',
includeInJSON: 'id'
}
}] });
ModelD :
ModelD = Backbone.Model.extend({ });
Collections :
ModelACollection = Backbone.Collection.extend({ model: ModelA });
ModelBCollection = Backbone.Collection.extend({ model: ModelB });
ModelCCollection = Backbone.Collection.extend({ model: ModelC });
ModelDCollection = Backbone.Collection.extend({ model: ModelD });
and i do this in the Router :
Router :
var obja = new ModelACollection(data);
var objb = new ModelBCollection(data.objb);
var objc = new ModelCCollection(data.objc);
var objd = new ModelDCollection(data.objd);
all get fetched but with many warning (firefox, chrome) looks like this :
Warning :
Relation=%o; no model, key or relatedModel (%o, %o, %o) ....
What is the meaning of this Warning?
That's the right to represent this Class Relation with Backbone-relational isn't?
if not?
How can i represent this as a Backbone ModelRelational?

In Model A you are defining
key: 'modelb'
which links to Model B. However, key should be "a string. References an attribute name on relatedModel" (based on the docs). And I cannot see and model field called modelb

Related

Sencha touch 2.4.1 - localstorage using own ID

I am trying to save data to local storage and I want to use my own ID.
But new id is generated.. and not using my ID.
My model:
Ext.define('mOQOLD.model.ActivityList',{
extend:'Ext.data.Model',
config:{
dProperty : 'uniqueid', // dummy name(not a field)
clientIdProperty : 'ID',
identifier: {
type: 'simple'
},
fields: [
{ name: "ID", type: "auto" },
{ name: "activityID", type: "int" },
{ name: "newRandom", type: "float" },
{ name: "rTime", type: "date", dateFormat: "Y-m-d H:i:s" }
]
}
});
My store:
Ext.define('mOQOLD.store.ActivityListStoreOffline',{
extend:'Ext.data.Store',
requires:["mOQOLD.model.ActivityList",
'Ext.data.proxy.LocalStorage'],
config:{
storeId:"ActivityListStoreOffline",
model:"mOQOLD.model.ActivityList",
grouper: {
groupFn: function(rec) {
var date = rec.get("actDtlStime");
return Ext.Date.format(date, "h a");
}
},
autoLoad:false,
sorters: [
{ property: "actDtlStime", direction: "ASC" }
],
proxy : {
type : 'localstorage',
id : "ActivityListStoreOffline",
model : "mOQOLD.model.ActivityList",
reader: {
type: "json"
}
}
}
})
The result( chrome) :
key : ActivityListStoreOffline-ext-record-19
value:
{"ID":"153",15:13:00","activityID":111,"newRandom":null,"rTime":"2015-05-26 19:31:51","id":"ext-record-19"}
What I expect:
key : ActivityListStoreOffline-153
value:
{"ID":"153",15:13:00","activityID":111,"newRandom":null,"rTime":"2015-05-26 19:31:51"} no id generated!!!
Thanks in advance..
There are two places you can set the ID:
In the model(http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.Model-cfg-idProperty)
and in the reader (http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.reader.Reader-cfg-idProperty)
Both places use the "idProperty" attribute. Which defaults to lowercase 'id'.
For example, change your reader to:
proxy : {
type : 'localstorage',
id : "ActivityListStoreOffline",
model : "mOQOLD.model.ActivityList",
reader: {
type: "json",
idProperty: "ID",
}
}

Extjs 4.1.1: Grid to Tree drag drop not working

I want to achieve something like this :
http://jsfiddle.net/mgill21/3HJXX/2/
But I whenever I drop a node from grid into the treecolumn (as a leaf node) I get errors such as node.updateInfo() is undefined and other node related undefined method.
Here is my code:
Ext.namespace('Ext.ux.window.ConfigureMobileApp');
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]);
var firstGridStore = Ext.create('Ext.data.Store', {
storeId : 'formStore',
fields : [ 'name', 'type', 'itemId' ],
data : [ {
name : "Michael Scott",
itemId : 7,
type : "Management"
}, {
name : "Dwight Schrute",
itemId : 2,
type : "Sales"
}, {
name : "Jim Halpert",
itemId : 3,
type : "Sales"
}, {
name : "Kevin Malone",
itemId : 4,
type : "Accounting"
}, {
name : "Angela Martin",
itemId : 5,
type : "Accounting"
} ]
});
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
ddGroup : 'selDD'
}
},
store : Ext.data.StoreManager.lookup('formStore'),
columns : [ {
text : "Name",
flex : 1,
sortable : true,
dataIndex : 'name'
}, {
text : "Type",
width : 70,
sortable : true,
dataIndex : 'type'
} ],
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0',
width : 200
});
Ext.define('Resource', {
extend : 'Ext.data.Model',
fields : [ {
name : "name",
type : "string"
}, {
name : "type",
type : "string"
} ]
});
var store1 = Ext.create('Ext.data.TreeStore', {
storeId : 'treeStore',
fields : [ 'name', 'type', 'itemId' ],
root : {
expanded : true,
children : [ {
itemId : 171,
type : "comedy",
name : "Mr Bean",
children : [ {
leaf : true,
itemId : 171,
type : "actor",
name : "Rowan Atkinson"
} ],
}, {
itemId : 11,
type : "fantasy",
name : "Harry Potter",
children : [ {
itemId : 11,
leaf : true,
type : "actress",
name : "Emma Watson",
} ]
}, {
itemId : 173,
type : "Action",
name : "Fast and Furious",
children : [ {
itemId : 174,
type : "actor",
name : "Dwayne Johnson",
children : [ {
leaf : true,
itemId : 175,
type : "wrestler",
name : "The Rock"
} ]
} ]
} ]
}
});
Ext.define('Ext.ux.window.TreeGrid', {
extend : 'Ext.tree.Panel',
title : 'Demo',
height : 300,
rootVisible : true,
singleExpand : true,
store : Ext.data.StoreManager.lookup('treeStore'),
columns : [ {
xtype : 'treecolumn',
text : 'Name',
dataIndex : 'name',
width : 200
}, {
text : 'Type',
dataIndex : 'type'
} ],
initComponent : function() {
this.callParent();
},
viewConfig : {
plugins : {
ptype : 'treeviewdragdrop',
ddGroup : 'selDD'
},
listeners : {
beforedrop : function(node, data) {
debugger;
data.records[0].set('leaf', true);
data.records[0].set('expanded', false);
data.records[0].set('checked', true);
},
drop : function(node, data, dropRec, dropPosition) {
// firstGridStore.store.remove(data.records[0]);
}
}
}
});
var secondTree = Ext.create('Ext.ux.window.TreeGrid');
Ext.define('Ext.ux.window.ConfigureMobileApp', {
extend : 'Ext.window.Window',
title : 'Configure Mobile App',
height : 600,
width : 600,
layout : 'hbox',
modal : true,
closeAction : 'hide',
items : [ firstGrid, secondTree ]
});
Please help. Stuck since a very long time.
To help u out with this error i m sending u two links .These are not the proper solution but will surely guide u a way for that.
First Link
Second Link

Multiple Stores Loading Issue Sencha Touch

I have two Stores 'Polls' and 'Choices' with respective models as 'Poll' and 'Choice'
models
Poll
Ext.define('PollsTest.model.Poll', {
extend: 'Ext.data.Model',
xtype : 'poll',
config: {
fields: [
{ name: 'title'},
{ name: 'uri' },
],
hasMany :
[
{
model : 'PollsTest.model.Choices',
name : 'Choices',
primaryKey : 'title',
foreignKey : 'title',
foreignStore : 'Choices'
}
]
}
});
Choice
Ext.define('PollsTest.model.Choice', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'choice', type: 'auto' },
{ name: 'votes', type: 'auto' },
{name : 'title', type: 'auto'},
{name : 'uri', type : 'auto'}
],
belongsTo : {
model : 'PollsTest.model.Choices',
name : 'Choices',
primaryKey : 'title',
foreignKey : 'title',
foreignStore : 'Choices',
getterName: 'getChoices',
setterName: 'setChoices'
}
}
});
Stores
Polls
Ext.define('PollsTest.store.Polls',{
extend : 'Ext.data.Store',
alias : 'store.pollStore',
//xtype:'pollStore',
requires :
[
'PollsTest.model.Poll',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json'
],
config :
{
autoLoad : true,
model : 'PollsTest.model.Poll',
storeId :'pollStore',
listeners :
{
load : function(store, records)
{
console.log('store loaded',records);
}
},
//storeId : 'pollstore',
proxy :
{
type : 'jsonp',
url : 'http://localhost/polls',
reader :
{
type : 'json',
rootProperty : 'polls'
}
}
},
});
Choices
Ext.define('PollsTest.store.Choices',{
extend : 'Ext.data.Store',
alias : 'store.choiceStore',
requires :
[
'PollsTest.model.Choice'
],
config :
{
autoLoad : false,
model : 'PollsTest.model.Choice',
storeId :'choiceStore',
listeners :
{
load : function(store, records)
{
console.log('choice store loaded',records);
}
},
proxy :
{
type : 'jsonp',
url : '',
reader :
{
type: 'json',
rootProperty : 'choices'
}
}
},
});
So from Polls store I can populate my List and upon clicking the list item the controller pushes the detail panel to the view. The Choices Store will populate based on the tap event occurred on the list. So the problem is I have to push the details panel to the view only after loading the Choices Store
How can I do that?? Suggestions are appreciated.
and My controller will look like this
Ext.define('PollsTest.controller.MainController', {
extend: 'Ext.app.Controller',
requires : ['PollsTest.controller.ChoiceController'],
config: {
refs: {
mainController : 'mainpanel',
controller_list : 'pollslist',
details_controller : 'pollsdetails'
},
control: {
controller_list :
{
itemtap : 'ShowPoll'
},
}
},
ShowPoll : function (list, index, target, record, e, eOpts)
{
var tochoice = record.data.uri;
var main_path = 'http://localhost';
var choices_url = main_path+tochoice;
var choice_store_object = Ext.getStore('choiceStore');
choice_store_object.getProxy().setUrl(choices_url);
choice_store_object.load();
console.log(choice_store_object.getCount());
/* var choices_store_object = Ext.create('PollsTest.store.Choices');
var checking = choices_store_object.on('load',function(){return true;});
if(checking==true) --> didn't work no detail panel pushing is happening but the order of loading the stores works fine here.
{
*/ console.log('before pushing');
this.getMainController().push({xtype : 'pollsdetails',data : record.data });
console.log('after Pushing');
// }
//this.getApplication().getController('ChoiceController').onDetailsShow(this,record,tochoice);
}
});
You can pass a callback function in your choice store load function. The callback function will be executed after the store has loaded.
choice_store_object.load(function(records, operation, success) {
// push the pollsdetails view here
}, this);
This is how I `i have implemented
var choices_store_object = Ext.create('PollsTest.store.Choices');
var checking =choice_store_object.load(function(records, operation, success)
{
console.log('before pushing');
this.getMainController().push({xtype : 'pollsdetails',data : record.data });
console.log('after Pushing');
}, this);
`

How do i reference complex json objects in my model so they can be displayed in a list

Im trying to reference complex json object in my model and then display them in a table along with the other object. Below is a an example of the json. How do get to rating and type?
"reviews" : [
{
"aspects" : [
{
"rating" : 1,
"type" : "food"
},
{
"rating" : 3,
"type" : "decor"
},
{
"rating" : 2,
"type" : "service"
}
]
Ext.define('FirstApp.model.Details',{
extend:'Ext.data.Model',
config:{
// fields: ['id','recordId','name','icon','vicinity','reference','website','reviews.aspects.type'],
fields: [ {
name: 'aspects',
mapping: 'reviews.aspects'
},
{
name: 'vicinity'
},
{
name: 'name'
},
{
name: 'icon'
},
{
name: 'website'
}]
}
})
I am calling the table below but i am getting the error Uncaught SyntaxError: Unexpected token ILLEGAL where the itemTpl is.
{
xtype:'list',
store:'Details',
itemTpl:'<img src="{icon}"></img><h1>{name:ellipsis(25)}</h1>
<h3>{vicinity:ellipsis(35)}</h3><h2>{website}</2><h2>{reviews}</h2><tpl for="aspects">
{rating} - {type}
</tpl>',
itemCls:'place-entry'
}
Note:
I have tried the following. The errors have stopped and all the other information is displayed but the aspect are still a no show.
itemTpl:new Ext.XTemplate(
'<div>',
'<div><img src="{icon}"></img><br>',
'<h1>{name}</1><br>',
' </div>',
'<div><h3>{vicinity:ellipsis(60)}</h3><h3>{website}</3><br>',
'<h3>{formatted_phone_number}</h3><br>',
'<tpl for="aspects"<td>{type}</td></tpl><br>',
' </div>',
'</div>'
),
And this is now how the model looks:
fields: [
{
name: 'reviews'
},
{
name: 'aspects',
mapping: 'reviews.aspects'
},
{
name: 'vicinity'
},
{
name: 'name'
},
{
name: 'icon'
},
{
name: 'website'
},
{
name: 'formatted_phone_number'}]
}
Sample Data:
"reviews" : [
{
"aspects" : [
{
"rating" : 3,
"type" : "food"
},
{
"rating" : 3,
"type" : "decor"
},
{
"rating" : 3,
"type" : "service"
}
],
"author_name" : "Aubrey Skelly",
"author_url" : "https://plus.google.com/101776084849290882399",
"text" : "Small and wonderful, the food fantastic, service 100% miss this wonderful restaurant and you will miss a gem in waterford",
"time" : 1359588944
},
I think you have to map in the model:
fields: [
{
name: 'aspects',
mapping: 'reviews.aspects'
},
{
name: 'vicinity'
}
...
Then in tpl:
<tpl for="aspects">
{rating} - {type}
</tpl>
Note:
You can not have line breaks in the tpl:
//this will throw an error
itemTpl: '<div>this is some content<br>
this is the same div but I am on a new line now</div>'
You have to split the lines:
//this is OK
itemTpl: '<div>this is some content<br>',
'this is the same div but I am on a new line now</div>'

TreePanel Error : Uncaught TypeError: Cannot call method 'substring' of undefined

I've a problem while rendering TreePanel. I'm using MVC structure, here's my definition:
(By the way I don't use dynamic loading, included ext-all-debug.)
Menu - Model
Ext.define('RIA4.model.Menu', { extend : 'Ext.data.Model',
idProperty : 'menuId',
fields : [
{ name : 'menuId', type : 'int' },
{ name : 'menuName', type : 'string' },
{ name : 'sourcePath', type : 'string' },
{ name : 'active', type : 'boolean', defaultValue : true },
{ name : 'leaf', type : 'boolean' }
]
});
TreeStore
Ext.define('RIA4.store.Menus', { extend : 'Ext.data.TreeStore',
model : 'RIA4.model.Menu',
proxy : {
type : 'ajax',
api : {
read : 'menu/view.ajax'
},
reader : {
type : 'json',
root : 'data',
successProperty : 'success'
}
},
autoLoad : true
});
TreePanel
Ext.define('RIA4.view.menu.MenuTree', { extend : 'Ext.tree.Panel',
alias : 'widget.menutree',
//requires : [],
title : 'Menu List',
store : 'Menus',
rootVisible : false,
root : {expanded: true, text: "", "data": []}
});
I'll be happy if someone can help me?
Thanks in advance..
Haven't you forgotten to add the following line to controller's config:
views: [ 'menu.MenuTree' ],

Resources