Sencha extjs empty grid

Question

I'm learning Sencha exjs and I am trying to fill a grid using proxy in the Store,

Here is the capture of what I'm trying to do

you can find in the console area the log of the store. Here is my Sore code

Ext.define('MyApp.store.User', {
  storeId: 'users',
  extend: 'Ext.data.Store',
  model: 'MyApp.model.User',
  autoLoad: true,
  proxy: {
    type: 'ajax',
    url: 'https://reqres.in/api/users',
    reader: {
      type: 'json',
      rootProperty: 'data'
    }
  },
  listeners: {
        datachanged: function() {
            console.log(this);
        }
    }
});

Here is the Model

Ext.define('MyApp.model.User', {
  extend: 'Ext.data.Model',
  fields: ['id', 'email', 'first_name', 'last_name', 'avatar']
});

And here is the main View

Ext.define('MyApp.view.Main', {
  extend: 'Ext.container.Container',
  requires: [
    'Ext.tab.Panel',
    'Ext.layout.container.Border'
  ],

  xtype: 'app-main',

  layout: {
    type: 'border'
  },

  items: [{
    region: 'west',
    xtype: 'panel',
    title: 'west',
    width: 150
  }, {
    region: 'center',
    xtype: 'tabpanel',
    items: [{
        title: 'Center Tab 1',
        items: [{
          xtype: 'grid',
          flex: 1,
          columnLines: true,
          title: 'Users',
          store: 'MyApp.store.User',
          bind: '{users}',
          columns: [{
              text: 'ID',
              dataIndex: 'id'
            },
            {
              text: 'Email',
              dataIndex: 'email',
              flex: 1
            },
            {
              text: 'First name',
              dataIndex: 'first_name'
            },
            {
              text: 'Last name',
              dataIndex: 'last_name'
            },
            {
              text: 'Avatar',
              dataIndex: 'avatar'
            }
          ],
          height: 300,
          width: 700
        }]
      },
      {
        title: 'Center Tab 2',
        items: [{
          xtype: 'component',
          html: 'Hello 2'
        }]
      }
    ]
  }]
});

This is the fake api I'm using : https://reqres.in/api/users

Answer 1

Looks like you have forgotten to register your store in the app.js Something like:

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    name: 'MyApp',
    stores: [
        // Here register your global stores
    ]
...
...

Or, if it is not global store just create it by class name:

...
...
}, {
        region: 'center',
        xtype: 'tabpanel',
        items: [{
            title: 'Center Tab 1',
            items: [{
                xtype: 'grid',
                flex: 1,
                columnLines: true,
                title: 'Users',
                store: Ext.create('MyApp.store.User'), // HERE
                bind: '{users}',
                columns: [{
                    text: 'ID',
                    dataIndex: 'id'
                }, {

Fixed Layout, store name etc.

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'email', 'first_name', 'last_name', 'avatar']
});

Ext.define('MyApp.store.Users', {
    storeId: 'Users',
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'https://reqres.in/api/users',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    },
    listeners: {
        datachanged: function () {
            console.log(this);
        }
    }
});

Ext.define('MyApp.view.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'Ext.tab.Panel',
        'Ext.layout.container.Border'
    ],

    xtype: 'app-main',

    layout: {
        type: 'border'
    },

    items: [{
        region: 'west',
        xtype: 'panel',
        title: 'west',
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel',
        items: [{
            title: 'Center Tab 1',
            padding: 5,
            layout: 'fit',
            items: [{
                xtype: 'grid',
                flex: 1,
                columnLines: true,
                title: 'Users',
                store: Ext.create('MyApp.store.Users'),
                bind: '{users}',
                columns: [{
                    text: 'ID',
                    dataIndex: 'id'
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    text: 'First name',
                    dataIndex: 'first_name'
                }, {
                    text: 'Last name',
                    dataIndex: 'last_name'
                }, {
                    text: 'Avatar',
                    dataIndex: 'avatar'
                }]
            }]
        }, {
            title: 'Center Tab 2',
            items: [{
                xtype: 'component',
                html: 'Hello 2'
            }]
        }]
    }]
});