ExtJs 6 Store not visible in Grid

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?

score 1 · Accepted Answer · answered Nov 16 '15 at 20:54

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...

Thank you for suggestions. I've change the way addressing store in grid as //,store: Ext.data.StoreManager.lookup('QuotaKPI.store.accounting.Quota') ,store: { type: 'accounting.Quota' } and type of store to extend: 'Ext.data.Store' instead JsonStore. The grid is rendered, but show only first page. — AlexeiP, Nov 17 '15 at 12:46
If you do like this, even if you've set a storeId, when you create you store with *type*, you force the framework to generate a NEW instance. Try: `Ext.data.StoreManager.lookup('QuotaKPI.store.accounting.Quota').getId()` and `Ext.data.StoreManager.lookup({type: 'accounting.Quota}).getId()` and you will see that the id is different. I suggest to do one way (with *storeId* or another (by ViewModel), but to be consistent within the class. The "standard" way is the ViewModel so I suggest to really check if you need the *storeId* and else go with the ViewModel way — Psycho, Nov 19 '15 at 08:11
Thank you very much. Last comment helps me understand why I could not navigate through pages with pagination toolbar. — AlexeiP, Nov 19 '15 at 15:09

ExtJs 6 Store not visible in Grid

1 Answers1