Extjs 5 strange behavior of the getStore() method

Question

I've faced with the strange getStore() method behavior.

Having main viewport with two regions: north and center. On the north region there is a button 'Show grid', if to click on this button QueryResultsGridView is loaded to the center region

var panelToAddName = Ext.create('MyApp.view.QueryResultsGridView', {});
var mainViewPort = Ext.getCmp('mainViewPort');
var centerRegion = mainViewPort.down('[region=center]');
centerRegion.removeAll();
centerRegion.add(panelToAddName);

my Store

Ext.define('MyApp.store.QueryResultsGridStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.QueryResultsGridModel',
    alias: 'store.queryResultsGrid',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'queryResultsGrid.json',
        reader: {
            type: 'json'
        }
    }
});

my ViewModel

Ext.define('MyApp.viewmodel.MainViewModel', {
    extend: 'Ext.app.ViewModel',

    requires: [
        'MyApp.store.QueryResultsGridStore'
    ],

    alias: 'viewmodel.main',

    stores: {
        queryResultsGrid: {
            type: 'queryResultsGrid'
        }
});

my Panel

Ext.define('MyApp.view.QueryResultsGridView', {
    extend: 'Ext.Panel',
    requires: [
        'MyApp.controller.QueryResultsGridViewController'
    ],
    controller: 'queryResultsGrid',
    listeners: {
        afterrender: 'onFormAfterRender'
    },
    items:[{
        reference: 'queryResultsGrid',
        layout: 'fit',
        items: [
        {
            xtype: 'grid',
            reference: 'grid',
            bind: {
                store: '{queryResultsGrid}'
            },
            columns: [
                { text: 'Text1', dataIndex: 'text1', flex: 1 },
                { text: 'Text2', dataIndex: 'text2', flex: 3 }
            ]
        }]
    }]
});

my ViewController

Ext.define('MyApp.controller.QueryResultsGridViewController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.queryResultsGrid',

    onFormAfterRender: function(form, parent1) {
        console.log(form.down('grid'));
        console.log(form.down('grid').store);
    }
});

Now in console I see 2 Objects as suggested above. If I go inside the first Object there is a data inside it, but inside the second one store is empty. Could anyone suggest me why? Btw I need this store to run store.load().

first Object

second Object

second object

UPDATED

Here is https://fiddle.sencha.com/fiddle/kf3/preview if it helps, you can see in the console 2 Objects I mentioned above. Source code is available here https://fiddle.sencha.com/#fiddle/kf3

does your grid have a getStore() method? like form.down('grid').getStore() — mohas
.getStore() has the same behavior as .store - nothing inside data — fen1ksss
Here's another thing to consider trying: because you've defined the store on the view model, you should be able to get it directly from the there from the view controller. Try that as well, something like this.getView().getStore() from a VC handler, take a look at the VC docs for a full example then we can add a new answer. — Colin Ramsay
yes, I've also tried it like that this.getViewModel().getStore('QueryResultsGridStore'); but still the same result — fen1ksss

mohas mohas · Accepted Answer · 2015-03-28T13:13:01

0

votes

You can use the Ext.getStore() method to get any store

Extjs 5 strange behavior of the getStore() method

3 Answers