javascriptextjssencha-touchextjs-mvc

Sencha extjs empty grid


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 enter image description here

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


Solution

  • enter image description here 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'
                }]
            }]
        }]
    });