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