View Full Version : Model Associations : belongsTo model loads twice and one load is corrupted

12 Feb 2012, 2:11 PM
I have a grid which uses a model: M_User

The M_User model has a belongsTo association: belongs to M_Contact
The M_User model read proxy does not return Contacts data in the json.... so I should need to load the related data separately.

When I click on a grid row, the following function is called:

userlist_editUser: function(grid, record) {
console.log(record); // works ok
success: function(contact){
// do something

Looking in Chrome Console tools, I see that there are TWO requests to my server side PHP which serves up the Contact.
In the first call, everything looks fine and the request looks like:

getContact.php?id=22 where 22=the related Contact's ID

and the server response also looks ok:

{success: true, contacts:[{"Contact_ID":"33","FirstName":"John","LastName":"Smith"}]}

However, my success callback doesn't fire.

Then, for some reason there is a SECOND request being generated to getContact.php which looks like this:

GetContacts.php?_dc=1329076290445&id=function (contact){.... (basically, instead of the id = 22, all of the javascript for my call back function is appended to the url for some reason.

Somehow, the javascript of my callback function (including white space converted to % chars, etc) is being passed to my server side. wtf?
and that obviously fails to generate useable json. (response has PHP error text)
Interestingly, THIS response comes back to my javascript code, ...but I get the obvious:

Ext.Error: Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String:

What is happening here?

I thought that since the getUsers.php doesn't return any associated Contacts in the json, I had to use getContacts().load()
However, I tried putting the callback function in getContacts() directly like:
record.getContacts({callback: function(contact){......
and that sort of worked. I could now do console.log(contact.get("FirstName")) and it would spit out the associated contact's first name.
However, if I double click on the same row again later, I get a javascript error:
ie: Ie dblClick on user 1... and I get user 1's associated contacts name
dblClick on user 1 again...and get error:
Uncaught TypeError: Object function (){return this.constructor.apply(this,arguments)} has no method 'get'

NOTE: I have tried experimenting with primaryKey, and foreignKey settings to.
In my database, my user table is:
User_ID: PK
UserName: string
Contact_ID: foreign key from contacts table

my contact table is:
Contact_ID: PK
FirstName: string
LastName: string

Here is my M_User model:

Ext.define('CI.model.M_User', {
extend: 'Ext.data.Model',
idProperty: 'User_ID',
fields: ['User_ID', 'UserName','SecurityEmail', 'Contact_ID'],
belongsTo: {
model: 'CI.model.M_Contact',
getterName: 'getContact',
name: 'M_Contact',
foreignKey : 'Contact_ID'
proxy: {
type: 'ajax',
api: {
read: 'data/GetUsers.php',
update: 'data/UpdateUsers.php'
reader: {
type: 'json',
root: 'users',
successProperty: 'success',
messageProperty: 'message'
writer: {
type: 'json',
root: 'users',
allowSingle: false

My code is getting pretty messy with many attempts to figure this out...so my above quoted code etc may not be good.. Bottom line: Associations seem like a pretty cool and powerful addition in ExtJS4. However, we definitely need more examples, demos, etc. Especially with regards to using the associations in REAL views etc.... either that or I'm just stupid.

13 Feb 2012, 12:48 AM
It would be a lot easier to help if you can strip it down to a runnable example. Remove all irrelevant code and just upload a zip with your js files, and dummy data mocking the server responses. Then it's easy for us to download, open and try to debug it.