Extjs Grid 不显示任何数据

Posted 2023-02-26

【中文标题】Extjs Grid 不显示任何数据

【英文标题】：Extjs Grid doesn't show any data

【发布时间】：2010-12-17 04:03:40

【问题描述】：

我创建了以下网格组件：

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

网格正确呈现，映射到MyAppUrls.ListRelationshipMembers 的 URL 正确。正在检索数据，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'
    );

没有变化，数据网格没有被记录填充

【参考方案1】：

埃文是正确的。你最大的问题是缺乏读者。那和你留在那里的验证存根需要返回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'
            )
        );
    
);

【讨论】：

那行得通。结果我第二次尝试的问题是字段数组在我的 GroupingStore 中，而它本应在阅读器中！

【参考方案2】：

认为您需要在这里做几件事：首先，正如 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' 
        )
    );

我已将此处的商店类型更改为更简单的类型 - 您使用 GroupingStore 是否有特殊原因？请注意，根是在 reader 中指定的，而不是 store 本身。

然后，在您的列中，我倾向于添加一个渲染器来明确确定每列将显示什么，例如：

buildColumns: function () 
    return [
        header: 'Id',
        dataIndex: 'Id',
        sortable: true,
        width: 10,
        renderer: function (value, metaData, record) 
            return record.data.Id
        
     ... ];

我已经养成了使用渲染器的习惯，因为我在网格中大量修改了列单元格的内容。注意这里传递给渲染器函数的参数；还有一些您可以传入 - 如果您需要有关您可以实际访问的内容的更多信息，请参阅ExtJS API。在这方面，API 文档非常好 - 可能需要深入研究，但如果您经常使用 ExtJS，那么绝对值得您花时间。

【讨论】：

感谢您的回复，我下班回家后会检查其中的一些更改。至于分组数据存储，我希望我的数据网格根据ObjType 将结果分组在一起以方便用户使用。由于此处的示例，我想使用 GroupingStore：dev.sencha.com/deploy/dev/examples/grid/grouping.html，因为这与我想要做的非常相似。

将 JsonReader 添加到存储中并没有将数据加载到网格中，也没有将其从 GroupingStore 更改为 Store。我的网格还是空的

【参考方案3】：

您还没有在您的商店中指定阅读器，您需要在 JsonReader 中指定根。

【讨论】：

将 JsonReader 添加到商店并没有将数据添加到网格中