Sencha ext js пустая сетка - PullRequest
Новая
       73

Sencha ext js пустая сетка

0 голосов
/ 13 июля 2020

Я изучаю Sencha ex js и пытаюсь заполнить сетку с помощью прокси в магазине,

Вот запись того, что я пытаюсь сделать 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

1 Ответ

1 голос
/ 13 июля 2020

введите описание изображения здесь Похоже, вы забыли зарегистрировать свой магазин в приложении. js Что-то вроде: 

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

Или, если это не глобальный магазин, просто создайте его по имени класса: 

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

Фиксированный макет, имя магазина и т. Д. c. 

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