Data binding associations in ExtJS admin template - extjs

Question

I'm unsuccessful in getting binding associations working in the admin dashboard template (with the desired behavior of selecting a record from a combobox and pulling up associated records in a grid).
My main viewModel is defined as:
Ext.define('Admin.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
stores: {
patients: {
model: 'md_registry.model.Patient',
autoLoad: true
}
}
});
I added a leaf node to Pages in NavigationTree.js:
{
text: 'Pages',
iconCls: 'x-fa fa-leanpub',
expanded: false,
selectable: false,
//routeId: 'pages-parent',
//id: 'pages-parent',
children: [
{
text: 'Proc',
iconCls: 'x-fa fa-send',
rowCls: 'nav-tree-badge nav-tree-badge-hot',
viewType: 'procedure',
leaf: true
}]
}
With the procedure view being:
Ext.define('Admin.view.pages.Procedure', {
extend: 'Ext.panel.Panel',
xtype: 'procedure',
requires: [
'Ext.panel.Panel',
'Admin.model.Patient',
'Admin.model.Procedure'
//'Admin.model.Diagnosis'
],
anchor : '100% -1',
referenceHolder: true,
width: 1000,
height: 1000,
referenceHolder: true,
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: 'main',
session: {},
items: [
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
{
title: 'Procedures',
xtype: 'grid',
bind: '{patientCombo.selection.procedures}',
flex: 1,
margin: '0 0 0 10',
columns: [{
text: 'Procedure Date', dataIndex: 'proc_date', flex: 1
}, {
text: 'Procedure', dataIndex: 'proc_name', flex: 1
}],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : new Ext.XTemplate(
'<p><b>Proc Name Orig:</b> {proc_name_orig}</p>',
'<p><b>Proc Code:</b> {proc_code}</p>',
'<p><b>Proc Code Type:</b> {proc_code_type}</p>')
}],
viewConfig: {
emptyText: 'No procedures',
deferEmptyText: false
}
}]
});
My Patient and Procedure models are simply:
Ext.define('Admin.model.Procedure', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
//{ name: 'id', type: 'string' },
{ name: 'proc_code', type: 'string' },
{ name: 'proc_name', type: 'string' },
{ name: 'proc_code_type', type: 'string' },
{ name: 'proc_name_orig', type: 'string' },
{ name: 'proc_date', type: 'date', format: 'Y-m-d' },
{
name: 'patient_id',
type: 'string',
reference: {
parent: 'Admin.model.Patient',
//type: 'md_registry.model.Patient',
inverse: 'procedures',
autoLoad: false
}
}
],
proxy: {
type: 'rest',
url: 'http://127.0.0.1:5000/procedureview/api/read',
reader: {
type: 'json',
rootProperty: ''
}
}
});
and
Ext.define('Admin.model.Patient', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.proxy.Rest'
],
fields: [
{ name: 'id', type: 'string' },
{ name: 'mrn', type: 'string' },
{ name: 'birth_date', type: 'date', format: 'Y-m-d' },
{ name: 'sex', type: 'string' },
{ name: 'first_name', type: 'string' },
{ name: 'last_name', type: 'string' }
],
proxy: {
type: 'ajax',
url: 'http://127.0.0.1:5000/patientview/api/read',
reader: {
type: 'json',
rootProperty: ''
}
}
});
respectively.
The data for my Patients store are getting loaded into the combobox just fine, but when I select an item from the combo list it is not firing off the call to grab the associated procedures data (see image: .
However, the binding associations work as expected with Side Navigation Tabs (see image: , and show up within the object prototype chain, as expected... see
(whereas for the admin dashboard, the associations are empty).
I cannot for the life of me get these working in the Admin Dashboard. I noticed a tool called the bind inspector, but I am running the GPL version of the SDK, so I do not have access to this. Beyond this, I cannot figure out a way to debug why the binding association is not working in the admin dashboard, but otherwise works perfectly well in Side Navigation Tabs.
I would set up a Fiddle, but I have no idea how to do it using the Admin Template.

Answer 1

I just figured it out. It was a namespace issue.
My reference in the procedure model should be:
reference: {
parent: 'Patient',
inverse: 'procedures',
autoLoad: false
}
Voila, all the associated data get loaded as expected!