javascript - Sencha extjs 空网格
问题描述
我正在学习 Sencha exjs,我正在尝试使用商店中的代理填充网格,
您可以在控制台区域中找到商店的日志。这是我的痛处代码
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
解决方案
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'
}, {
固定布局,商店名称等。
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'
}]
}]
}]
});
推荐阅读
- google-data-studio - 数据工作室 | 如何为 >= 或 <= 编写大小写以过滤日期维度的数据
- xilinx - HLS:由于指针选择,无法应用数组转换杂注/指令
- javascript - 无法在开发者工具或 cookie 对象下看到 JavaScript cookie
- ruby - 临时自定义事件未使用 ruby sdk 登录 App 洞察
- xcode - 将 Intel fortran 编译器与 XCode IDE 集成
- python - 根据列中的 ID 组合和扩展 Dataframe
- php - 将多个可选参数传递给路由
- python - 在可滚动框架内居中和展开小部件
- javascript - 当我使用谷歌翻译切换其他语言时,购物车功能不起作用,其中使用了一些 vuejs 代码
- database - Visual Studio 2022 asp.net core 从 sql 添加模型