Extjs Grid не показывает никаких данных
-
11-10-2019 - |
Вопрос
Я создал следующий компонент сетки:
MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,
initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}
MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},
verifyParameters: function () {
// Verification code
},
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},
buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},
buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
root: 'data',
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
groupField: 'ObjType'
});
}
});
Сетка отображается правильно, а URL-адрес, который сопоставлен с MyAppUrls.ListRelationshipMembers
это правильно.Данные извлекаются, и ListRelationshipMembers
URL возвращает следующий JSON:
{"data":[{"Id":1,"ObjType":"topic","Name":"Test2"}]}
Тем не менее, даже несмотря на то, что сетка визуализирована (столбцы, границы и т.д.), В фактической сетке данные не отображаются.Поскольку я впервые использую хранилище данных, я не уверен в том, что я делаю не так.Любая помощь была бы признательна.
Редактировать:
Я попытался обновить магазин, чтобы у него был читатель, с помощью следующего кода:
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
}),
groupField: 'ObjType'
});
Никаких изменений, сетка данных не заполняется записями
Решение
Эван прав. Ваша самая большая проблема - отсутствие читателя. Это и заглушка, которую вы оставили там, должны были вернуть True. Если вы не можете просто бросить этот код и заставить его работать, у вас есть другая проблема.
MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,
initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}
MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},
verifyParameters: function () {
// Verification code
return true;
},
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},
buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},
buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
reader: new Ext.data.JsonReader({
root: 'data',
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
groupField: 'ObjType'
})
});
}
});
Другие советы
Думаю, вам нужно сделать здесь пару вещей:во-первых, как упоминал Эван, вам нужно добавить ридер в свой магазин, вот так:
buildStore: function () {
return new Ext.data.Store({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
})
});
}
Я изменил тип магазина здесь на что-то более простое - была ли какая-то особая причина, по которой вы использовали GroupingStore?Обратите внимание, что root указан в программе чтения, а не в самом хранилище.
Затем в ваши столбцы я бы добавил средство визуализации, чтобы явно определить, что будет отображаться в каждом столбце, например:
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10,
renderer: function (value, metaData, record) {
return record.data.Id
}
} ... ];
}
У меня вошло в привычку использовать средства визуализации, поскольку я довольно сильно изменяю содержимое ячеек моих столбцов в своих сетках.Обратите внимание здесь на аргументы, передаваемые функции визуализации;есть еще несколько, которые вы можете передать - смотрите ExtJS API если вам нужно больше информации о том, к чему вы на самом деле можете получить доступ.На этой ноте документация по API довольно хороша - в ней может потребоваться некоторое изучение, но она определенно стоит вашего времени, если вы много работаете с ExtJS.
Вы не указали читателя в вашем магазине, вам нужно указать корень в JSonReader.