题
我创建了以下网格组件:
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'
})
});
}
});
其他提示
认为您需要在这里做几件事:首先,如埃文(Evan)所述,您需要将读者添加到您的商店中,这样:
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'
})
});
}
我在这里更改了商店类型,更简单 - 您使用GroupStore的特殊原因吗?请注意,根是在读者中指定的,而不是存储本身。
然后,在您的列中,我倾向于添加一个渲染器,以明确确定每个列将显示的内容,例如:
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10,
renderer: function (value, metaData, record) {
return record.data.Id
}
} ... ];
}
我已经养成了使用渲染器的习惯,因为我在网格中对柱单元的含量进行了重大修改。请注意,此处传递给渲染器函数的论点;您还可以传递几个 - 查看 EXTJS API 如果您需要有关实际访问内容的更多信息。关于这一点,API文档非常好 - 如果您经常使用ExtJ,则可能需要一些时间,但绝对值得您花费时间。
您尚未在商店中指定读者,需要在JSONREADER中指定根。
不隶属于 StackOverflow