PDA

View Full Version : Issue binding Grid to the viewmodel store



doddasuresh
21 Jul 2015, 12:09 AM
I have a viewmodel in which store defined as below. The store has a parameter SSN that has to be set based on global variable in app.


Ext.define('MyApp61.view.cscase.CaseModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.caselist',
stores: {
caselistStore: {
model: 'MyApp61.model.CaseListModel',
proxy: {type: 'ajax', url: 'http://localhost/MobileWebAPI/api/CaseHistory/CaseList',
extraParams:{ssn: ''}},
reader: {
type: 'json',
rootProperty: 'Cases'
},
listeners:
{
beforeload: 'onLoad'
},
autoLoad: true
}
}
});


I have ViewController defined as below, that has onLoad event handler that's passing SSN.


Ext.define('MyApp61.view.cscase.CaseController', {
extend: 'Ext.app.ViewController',
alias: 'controller.caselist',


onLoad: function() {


this.getViewModel().getStore('caselistStore').getProxy().getExtraParams().ssn= MyApp61.app.loggedInUserSSN
this.getViewModel().getStore('caselistStore').sync()


}
})


I have model defined as below.


Ext.define('MyApp61.model.CaseListModel', {
extend: 'Ext.data.Model',
id: 'CaseListModel',
config: {
fields: [
{ name: 'CaseId', type: 'string' },
{ name: 'Error', type: 'string' },
{ name: 'Msg', type: 'string' },
{ name: 'UserName', type: 'string' },
{ name: 'OtherName', type: 'string' },
{ name: 'OtherParty', type: 'string' },
{ name: 'CaseType', type: 'string' }
],
validations: [
{ type: 'presence', field: 'CaseId' }
]
}
});


I have a view defined as below, binding to the viewmodel store.


Ext.define('MyApp61.view.cscase.CaseList', {
extend: 'Ext.grid.Grid',
xtype: 'caselist',


requires: [
// 'MyApp61.store.SearchParticipantStore'
'MyApp61.view.cscase.CaseController','MyApp61.view.cscase.CaseModel'
],


title: 'Case List (Modern)',
reference: 'caseGrid',
controller: 'caselist',
viewModel: {type: 'caselist'},
//store: caseListStore,
columns: [
{ text: 'Case Id', dataIndex: 'CaseId', width: 100 },
{ text: 'Other Name', dataIndex: 'OtherName', width: 130 },
{ text: 'Other Party', dataIndex: 'OtherParty', width: 50 }
],


listeners: {
select: 'onItemSelected'
},
bind: {
store: '{caselistStore}'
//deep: true
},
autoLoad: true
}
);


I see ajax request in the debug console with valid data passed and data returned. My issue is, grid is not loaded with the data. What am I doing wrong here? Is this way of doing best practice? Please help.

joel.watson
26 Jul 2015, 6:31 AM
Hi--

Are you able to put together a runnable example of the issue you're experiencing?

https://fiddle.sencha.com

Thanks!
Joel

oturkan
12 Dec 2015, 6:22 PM
Hi doddasuresh

Same problem i have. Any solution you find

MikeRH
14 Dec 2015, 10:17 AM
What does the JSON response look like?