hasMany association does not work in sample project.

[sachindev]

I am following the documentation of sencha to implement one-to-many association in two models but i am not getting expected result from generated function. Company.getEmployees() method is returning empty store.

I have two model Company and Employee. where company has one-to-many assocation with employee. Sample code is written to load employee grid after changing value of company combo box. Help me to solve the issue

app.js

Ext.define('Company', {
   extend : 'Ext.data.Model',
   fields : [{
      name : 'id',
      type : 'int'
     }, {
      name : 'name',
      type : 'string'
     }],
   hasMany : {
    model : 'Employee',
    name : 'getEmployees',
    associationKey : 'Employee'
   }
  });
Ext.define('Employee', {
 extend : 'Ext.data.Model',
 fields : [{
    name : 'id',
    type : 'int'
   }, {
    name : 'name',
    type : 'string'
   }, {
    name : 'dept',
    type : 'string'
   }, {
    name : 'skills',
    type : 'string'
   }, {
    name : 'company_id',
    type : 'int'
   }],
 //belongsTo : 'Company'
  
   associations: [ { type: 'belongsTo', model: 'Company', foreignKey:'company_id' } ]
   
 });
var empStore = Ext.create('Ext.data.Store', {
   model : 'Employee',
   proxy : {
    type : 'ajax',
    url : 'data/employeeRec.json',
    reader : {
     type : 'json',
     root : 'response.records'
    }
   }
  });
var compStore = Ext.create('Ext.data.Store', {
   model : 'Company',
   proxy : {
    type : 'ajax',
    url : 'data/companyRec.json',
    reader : {
     type : 'json',
     root : 'response.records'
    }
   }
  });
 
 Ext.application({
  name : 'p',
  layout : 'vbox',
  launch : function() {
   empStore.load({});
   compStore.load({});
   alert(Ext.create('Company',{id:1}).getEmployees().count());
 Ext.create('Ext.container.Viewport', {
   layout : {
    type : 'vbox'
   },
   renderTo : Ext.getBody(),
   defaults : {
    split : false
   },
   items : [{
    xtype : 'combo',
    store : compStore,
    displayField : 'name',
    valueField : 'id',
    listeners : {
     change : function(me, newV, oldV, b, c, d) {
       
   var ss = compStore.getAt(0).getEmployees();
   console.log(ss);
     }
    }
   }, {
    xtype : 'gridpanel',
    width : 400,
    height : 500,
    store : empStore,
    columns : [{
       text : 'Employee name',
       dataField : 'name'
      }, {
       text : 'Department',
       dataField : 'dept'
      }, {
       text : 'Skills',
       dataField : 'skills'
        }]
     }]
    })
 }
});

and json files// employeeRec.json
{
response : {
    records:[
    {id:'1', name:'Canon',company_id:3,dept:'IT',skills:'.Net, Ext JS 4'},
    {id:'2', name:'Walker',company_id:2,dept:'ITES',skills:'Apple iOS'},
    {id:'3', name:'Parker',company_id:2,dept:'Support',skills:'Mac'},
    {id:'4', name:'smith',company_id:1,dept:'Web',skills:'Java'},
    {id:'5', name:'graham',company_id:1,dept:'Software',skills:'.Net, Java'}
    ]
}
}
//companyRec.json
{
response : {
    records:[
    {id:1, name:'QES'},
    {id:2, name:'TCS'},
    {id:3, name:'IBM'},
    {id:4, name:'ABC'},
    {id:5, name:'X system'}
    ]
}
}

[sachindev]

I got the solution. We need to have only one json response. For the sample i was creating 2 json files that is wrong approach. We need to have nested data in one json file on sample also. like
Company:
id:'',
name: 'ABC',
employee:[
{id:'1', name:'Canon',company_id:3,dept:'IT',skills:'.Net, Ext JS 4'}

]

}
]

[mlourdes]

So , could you please show how you configure the associations in the case of only one json ?
do you still have the previous two models ?

[flanders]

You mean something like this?

The models:

Ext.define('ecms.remotehelp.articles.Model', {
	extend: 'Ext.data.Model',
	fields: [
		'id',
		'groupId',
		'chapterId',
		'weight',
		'name',
		{
			name: 'groupName',
			persist: false
		}, {
			name: 'concat',
			persist: false,
			convert: function(value, record) {
				return record.get('name') + ' (group: ' + record.get('groupName') + ')';
			}
		}
	],
	hasMany: {
		model: 'ecms.remotehelp.articles.texts.Model',
		name: 'texts'
	},
    proxy: {
    	reader: {
    		root: 'data',
    		type: 'json'
    	},
        type: 'rest',
        url : '%external-root-path%/rest/remoteHelpArticles'
    }
});

Ext.define('ecms.remotehelp.articles.texts.Model', {
	extend: 'Ext.data.Model',
	fields: [
		'language',
		'languageName',
		'title',
		'text',
		'keywords'
	],
    proxy: {
    	reader: {
    		root: 'data',
    		type: 'json'
    	},
        type: 'rest',
        url : '%external-root-path%/rest/remoteHelpArticles'
    }
});

The response:

{
  "success": true,
  "data": {
    "id": "2",
    "weight": "1",
    "groupId": "2",
    "name": "a",
    "chapterId": "4",
    "groupName": "a",
    "texts": [
      {
        "id": "2-en",
        "articleId": "2",
        "language": "en",
        "title": "a",
        "text": "<p>a<\/p>",
        "languageName": "English",
        "keywords": "a"
      },
      {
        "id": "2-nl",
        "articleId": "2",
        "language": "nl",
        "title": "",
        "text": "",
        "languageName": "Nederlands",
        "keywords": null
      }
    ]
  }
}

[sachindev]

Yes, it is ok.

But, I don't know why are you using 'Model' as a name here?: model: 'ecms.remotehelp.articles.texts.Model',
Although, you need to add your second model in Ext.require() before you define it in association. See below code

Ext.require('Employee')// important
Ext.define('Company',{
extend :'Ext.data.Model',
fields : [
{name:'id', type: 'int'},
{name:'name', type: 'string'}
],
hasMany : {model:'Employee' , name:'employees'}
});
Ext.define('Employee',{
extend :'Ext.data.Model',
fields : [
{name:'id', type: 'int'},
{name:'name', type: 'string'},
{name:'dept', type: 'string'},
{name:'skills', type: 'string'},
{name:'company_id', type: 'int'}
],

associations: [
{ type: 'belongsTo', model: 'Company', foreignKey: 'company_id' }
]
});

[flanders]

You should wrap your code in code tags, makes it much more readable

But, I don't know why are you using 'Model' as a name here?: model: 'ecms.remotehelp.articles.texts.Model',

Thats just how I namespaced that class, no further reason

Although, you need to add your second model in Ext.require() before you define it in association. See below code

When working with our continues integration tool for full projects with php, sql, sass and js (or some other solution that makes sure loading is in order) that's not necessary. Only when working with Sencha commands it is.

[sachindev]

If you are using Ext JS 4 and expecting code to implement association Like Company.getEmployee() will return a store with list of employess then you have to declear child model ''Employee'' in Ext.require('') otherwise store will be empty and will not do association.

Ext.require('Employee')// important
Ext.define('Company',{
extend :'Ext.data.Model',
fields : [
{name:'id', type: 'int'}, 
{name:'name', type: 'string'}
],
hasMany : {model:'Employee' , name:'employees'}
});
Ext.define('Employee',{
extend :'Ext.data.Model',
fields : [
{name:'id', type: 'int'}, 
{name:'name', type: 'string'},
{name:'dept', type: 'string'},
{name:'skills', type: 'string'},
{name:'company_id', type: 'int'}
],

associations: [
{ type: 'belongsTo', model: 'Company', foreignKey: 'company_id' }
]
});

[flanders]

Not trying to make this a yes/no game, but I think it serves some purpose to have the things here to be correct.

You do not need Ext.require() for anything else than making sure that classes you are needed are loaded just in time using the ExtJS Loader. If you are not using the loader, you do not need Ext.require().

To back that claim up a self-contained example:

<html>
    <head>
        <script src="extjs/ext-all-debug.js"></script>
    </head>
    <body>
        <script>
Ext.onReady(function() {
    var parentModel = Ext.define('test.child.Model', {
        extend: 'Ext.data.Model',
        fields: [
            'id',
            'name'
        ]
    });


    Ext.define('test.parent.Model', {
        extend: 'Ext.data.Model',
        fields: [
            'id',
            'name'
        ],
        hasMany: {
            model: 'test.child.Model',
            name: 'children'
        },
        proxy: {
                reader: {
                    root: 'data',
                    type: 'json'
                },
            type: 'rest',
            url : 'test.json'
        }
    });


    var parent = Ext.create('Ext.data.Store', {
        autoLoad: true,
        model: 'test.parent.Model',
        listeners: {
            load: function(store, records) {
                var record = records[0],
                    childrenStore = record.children();


                // Not pretty, but serves it purpose
                document.write(childrenStore.getAt(0).get('name'));
                document.write(childrenStore.getAt(1).get('name'));
            }
        }
    });
});
        </script>
    </body>
</html>

And the test.json file:

{
    success: true,
    data: [
        {
            id: 1,
            name: 'firstParent',
            children: [{
                id: 1,
                name: 'first child'
            },{
                id: 2,
                name: 'second child'
            }]
        }
    ]
}