ExtJs 6 Store not visible in Grid - extjs4.2

Question

I'm trying to port existing application from ExtJs 4.2.1 to 6.0.1
The problem that in debugger I see that grid has 'ext-empty-store' store instead of 'store.accounting.Quota'
I can load the store directly in panel activation listener by doing
var store = Ext.data.StoreManager.lookup('QuotaKPI.store.accounting.Quota');
store.load();
In firebug I see request and perfect json in response but nothing appears in the grid
Here are code snippets
app/store/accounting/Quota.js
Ext.define('QuotaKPI.store.accounting.Quota', {
extend: 'Ext.data.JsonStore',
model: 'QuotaKPI.model.accounting.QuotaModel',
alias: 'store.accounting.Quota',
storeId: 'QuotaKPI.store.accounting.Quota',
autoLoad: false,
proxy: {
...
}
});
app/view/accounting/QuotaGrid.js
Ext.define('QuotaKPI.view.accounting.QuotaGrid', {
extend: 'Ext.grid.Panel'
,xtype: 'QuotaGrid'
,store: Ext.data.StoreManager.lookup('QuotaKPI.store.accounting.Quota')
,columns: [
...
]
,dockedItems : [
,{xtype: 'pagingtoolbar',
dock:'bottom',
store: Ext.data.StoreManager.lookup('QuotaKPI.store.accounting.Quota'),
displayInfo: true,
displayMsg: 'Displaying Quota Details {0} - {1} of {2}',
emptyMsg: "No Quota to display"
}
]
,initComponent: function() {
this.callParent(arguments);
}
});
Store, model and grid declared in controller
Ext.define('QuotaKPI.controller.accounting.AccountingController', {
extend: 'Ext.app.Controller',
stores: ['accounting.Quota'],
models: ['accounting.QuotaModel'],
views: ['accounting.QuotaGrid']
...
And controller itself listed in app.js
Ext.application({
name: 'QuotaKPI',
controllers: [
'accounting.AccountingController'
],
init: function(app){
},
autoCreateViewport: true
});
Any help, please?

Answer 1

I know storeId doesn't accept some character (for example "-"), I don't know for dot... in any case I suggest to make it simple.
Try "myStoreId"
In addition you can try:
Ext.define('QuotaKPI.view.accounting.QuotaGrid', {
extend: 'Ext.grid.Panel'
,xtype: 'QuotaGrid'
,store: "myStoreId",
,columns: [
...
]
,dockedItems : [
,{xtype: 'pagingtoolbar',
dock:'bottom',
store: "myStoreId",
displayInfo: true,
displayMsg: 'Displaying Quota Details {0} - {1} of {2}',
emptyMsg: "No Quota to display"
}
]
,initComponent: function() {
this.callParent(arguments);
}
});
In addition I suggest to ensure you have a proper schema configuration (see http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.data.schema.Schema)
And then, you could try also with ViewModel instead of storeId (see http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html)
Don't hesitate to do a https://fiddle.sencha.com/#home
Good Luck!
Transition is not easy...