Sencha extjs 空网格

Question

我正在学习 Sencha exjs，我正在尝试使用商店中的代理填充网格，

这是我正在尝试做的事情的截图

您可以在控制台区找到商店的日志。这是我的 Sore 代码

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);
        }
    }
});

这是模型

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

这是主视图

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'
        }]
      }
    ]
  }]
});

这是假的 api 我正在使用：https://reqres.in/api/users

Answer 1

您似乎忘记了在 app.js 中注册您的商店类似于：

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

或者，如果它不是全局商店，只需按 class 名称创建它：

...
...
}, {
        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'
                }, {

固定布局、店铺名称等

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'
            }]
        }]
    }]
});

Sencha extjs 空网格

Sencha extjs empty grid

javascript

extjs

sencha-touch

extjs-mvc