Develop Reference

Backbone relational model saving error

I get the error, when I try to save the model with .save()
Converting circular structure to JSON
The funny thing is that modelInstance.toJSON() works just fine.
The error is thrown at backbone.js line 1148
which is:
params.data = JSON.stringify(options.attrs || model.toJSON(options));
Here is how I've setup of the model:
var Clip = Backbone.RelationalModel.extend({
idAttribute: "mediaItemId",
defaults: {
node: {}
}
});
var clipCollection = Backbone.Collection.extend({
model: Clip
});
var mainModel = Backbone.RelationalModel.extend({
url: '/api/v0/videostate',
relations: [
{
type: Backbone.HasMany
,key: 'videoCollection'
,relatedModel: Clip
,collectionType: clipCollection
,includeInJSON: Clip.idAttribute
,reverseRelation: {
key: 'parent',
includeInJSON: Clip.idAttribute
}
}
],
});
var modelInstance = new mainModel()
modelInstance.fetch();
The JSON that's loaded into the model:

Change includeInJSON: Clip.idAttribute in reverse relation to includeInJSON: Clip.prototype.idAttribute
Something like this
{
type: Backbone.HasMany
,key: 'videoCollection'
,relatedModel: Clip
,collectionType: clipCollection
,includeInJSON: Clip.prototype.idAttribute
,reverseRelation: {
key: 'parent',
includeInJSON: Clip.prototype.idAttribute
}
}

Created a JSFiddle with above code , http://jsfiddle.net/ravikumaranantha/PuLxQ/6/, it doesn't throw any error.
var Clip = Backbone.RelationalModel.extend({
idAttribute: "mediaItemId",
defaults: {
node: {} //could be problem here
}
});
I just sense problem could be (not sure) with having an object in defaults map, you should avoid using objects/arrays in defaults, they will get shared across all instances. If you can post response from fetch call, that should help us debug it further.

EXTJS Accessing Setters

Ext.define("E.model.P", {
extend: 'Ext.data.Model',
associations: [{
type: 'hasOne',
model: 'E.model.D',
associationKey: 'D',
name:'demo',
getterName: 'getD', // avoid dots in function name
setterName: 'set' // avoid dots in function name
}],
fields: [
{ name: 'id', type: 'int' },
{ name: 'CPR', type: 'string' },
]
});
I have a Store created with the Model P
var store = Ext.create("E.store.MyP");
store.load(function() {
store.each(function(record) {
var info = {
data: Ext.encode(record.getData()),
allData: Ext.encode(record.getData(true)),
personData: Ext.encode(record.getD()) //Here i get the getD is not a function
};
console.log(info);
});
});
The problem I am having is getD is not a function, It will only work if I do not have classes define ex: Ext.define("P").
So how do I access the getD so I can drill further down?
This works http://jsfiddle.net/aqHdC/
Now when I start seperating the classes, It stops working and says can't find function

The associated model (in your example E.model.D) class must be loaded for the getter to be generated.
That means you need to require this class in your base model class definition (or, as you have found out, have all your classes in the same file).
For example:
Ext.define("E.model.P", {
extend: 'Ext.data.Model',
// here's for the class loader!
requires: [
'E.model.D'
],
// rest of your definition
});

Error adding MixedCollection component to extjs form

I am trying to dynamically build a extjs form and when I try to add the dynamically built MixedCollection object to the form I get a TypeError: e.mixins.elementCt is undefined error.
<div id="form-#pageSpecificVar" class="grid-container even"></div>
<script>
Ext.define('HeaderForm', {
extend: 'Ext.form.Panel',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
id: Ext.id(),
defaultType: 'textfield',
items: [{
xtype: 'container',
items: [{
xtype: 'textfield',
fieldLabel: 'Test'
}]
}]
});
me.callParent(arguments);
}
});
// Define our data model
Ext.define('HeaderModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'FieldA', type: 'int' }
]
});
var store = Ext.create('Ext.data.Store', {
model: 'HeaderModel',
proxy: {
type: 'ajax',
actionMethods: { create: 'POST', read: 'GET', update: 'POST', destroy: 'POST' },
url: '#Url.Content("~/Test/Header")',
timeout: 1200000,
listeners: {
load: function () {
}
}
}
});
store.load({
scope: this,
callback: function (records, operation, success) {
var form = new HeaderForm();
var formItems = new Ext.util.MixedCollection();
Ext.each(records[0].fields.items, function (item) {
console.log(item);
formItems.add(new Ext.form.DisplayField({
fieldLabel: 'Test'
}));
}, this);
console.log(formItems);
form.add(formItems);
form.loadRecord(records[0].data);
form.render('form-#pageSpecificVar');
}
});
</script>
Another thing I don't understand is, when I put the function inside the load listener, nothing happens. So I had to resort to using the callback event.
Update:
form.add method takes a component or component array, so instead of adding MixedCollection type I refer to formItems.items to add the array of displayfields components.
But for some reason the store listeners load is not getting triggered when store.load is executed, does anyone see a problem with that?
Nevermind this... I figured out... I placed the listener instead of the proxy instead of the store.
Q2
Also something weird is that during the callback method of store.load, the records is not return with the loaded values.
Nevermind this... I figured out... It was the json object I'm passing. Forgot to take it out of the error/data structure for form.
Thanks

MixedCollection isn't an accepted parameter for add, you need to use an array. This info is in the docs.

How to get data from extjs 4 store

Im stack with ext js 4 at the very beginning. Im trying to get the current user data when starting the application using store. But Im not getting any data from the store, even the store.count return 0.
I found many description how to create store, but not how to access the data in it. I managed to get the data using Ext ajax request, but i think would be better using store and i cant avoid them..
My model:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
'id',
'username',
'email'
]
});
My store looks like:
Ext.define('MyApp.store.User.CurrentUser', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.User',
model: 'MyApp.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
method: 'POST',
url: Routing.generate('admin_profile'),
reader: {
type: 'json',
root: 'user'
}
}
});
The returned json:
{
"success":true,
"user":[{
"id":1,
"username":"r00t",
"email":"root#root.root"
}]
}
And the application:
Ext.application({
name: 'MyApp',
appFolder: '/bundles/myadmin/js/app',
models: ['MyApp.model.User'],
stores: ['MyApp.store.User.CurrentUser'],
//autoCreateViewport: true,
launch: function() {
var currentUser=Ext.create('MyApp.store.User.CurrentUser',{});
/*
Ext.Ajax.request({
url : Routing.generate('admin_profile'),
method: 'POST',
success: function(resp) {
var options = Ext.decode(resp.responseText).user;
Ext.each(options, function(op) {
var user = Ext.create('MyApp.model.User',{id: op.id,username:op.username,email:op.email});
setUser(user);
}
)}
});
*/
currentUser.load();
alert(currentUser.count());
}
});

The problem itself isn't that the store does not contain data, the problem is that the store load is asyncronous therefore when you count the store records, the store is actualy empty.
To 'fix' this, use the callback method of the store load.
currentUser.load({
scope : this,
callback: function(records, operation, success) {
//here the store has been loaded so you can use what functions you like
currentUser.count();
}
});

All the sencha examples have the proxies in the store, but you should actually put the proxy in the model, so that you can use the model.load method. the store inherits the model's proxy, and it all works as expected.
it looks like model.load hardcodes the id though (instead of using idProperty), and it always has to be an int, as far as I can tell.
good luck!

Sencha-Touch: Uncaught TypeError: Cannot read property 'proxy' of undefined

I'm working with Sencha-Touch 1.1. I'm trying to store data/info that a user fills in a form. Sencha-touch-debug keeps sending this to my console:
Uncaught TypeError: Cannot read property 'proxy' of undefined
Ext.data.AbstractStore.Ext.extend.constructor sencha-touch-debug.js:6381
Ext.data.Store.Ext.extend.constructor sencha-touch-debug.js :6849
(anonymous function) form_stores.js:1
Nothing gets stored and I cant read any data. Json/localstorage all are not working. Do I have to call them in my Ext.regApplication?? I tried giving them ID but that didn't worked. I just cant figure out whats wrong.
Code from form_stores.js:
App.stores.form = new Ext.data.Store({
model: 'Form',
autoLoad: true
});
Code from form_model.js:
App.models.Form = Ext.regModel('Form', {
fields: [ .... ],
validations: [ .... ],
proxy: {
type: 'localstorage',
id: 'sencha-users'
}
});

Import your models before the stores.

You're using the old way of registering your model. The sencha docs tells you the new way:
Ext.define("My.SpecifiedNamespace.Form", {
extend: "Ext.data.Model", //The important bit
fields: [ .... ],
validations: [ .... ],
proxy: {
type: 'localstorage',
id: 'sencha-users'
}
});