Grille ExtJS ne montre pas de données

Question

I crée la composante de grille suivante:

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

La grille rend correctement, et l'URL mappé à MyAppUrls.ListRelationshipMembers est correcte. Les données sont en cours de récupération, et l'URL de ListRelationshipMembers renvoie le JSON suivant:

{"data":[{"Id":1,"ObjType":"topic","Name":"Test2"}]}

Et pourtant, même si la grille est rendu (colonnes, bordures, etc ..) aucune donnée montre dans la grille réelle cependant. Comme c'est la première fois en utilisant un magasin de données, je ne suis pas sûr de ce que je fais mal. Toute aide serait apprécié.

Modifier :

J'ai essayé de mettre à jour le magasin d'avoir un lecteur via le code suivant:

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

Aucun changement, le DataGrid n'est pas rempli avec les enregistrements

Answer 1

Evan est correct. Votre plus gros problème est le manque d'un lecteur. Cela et le talon de validation vous avez quitté là-bas nécessaire pour retourner vrai. Si vous ne pouvez pas laisser tomber ce code et avoir vous travaillez avez un autre problème.

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

Answer 2

Pensez que vous devez faire une ou deux choses: d'une part, comme mentionné par Evan, vous devez ajouter un lecteur à votre magasin, comme ceci:

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

J'ai changé le type de magasin ici pour quelque chose de simple - était-il une raison particulière que vous utilisiez GroupingStore? Notez que la racine est spécifié dans le lecteur, pas le magasin lui-même.

Ensuite, dans vos colonnes, je tendraient à ajouter un moteur de rendu pour déterminer explicitement ce que chaque colonne affiche, par exemple:

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

J'ai l'habitude d'utiliser les équarrisseurs, puisque je modifie le contenu de mes cellules de la colonne assez fortement dans mes grilles. Notez ici les arguments étant passés à la fonction de rendu; il y a un peu plus, vous pouvez passer - voir le ExtJS API si vous avez besoin de plus d'informations sur ce que vous pouvez réellement accès. Sur cette note, la documentation de l'API est assez bonne - il peut prendre un certain creuser dans, mais certainement en valeur votre temps si vous travaillez avec ExtJS beaucoup

.

Answer 3

Vous n'avez pas spécifié un lecteur sur votre magasin, vous devez spécifier la racine dans le JsonReader.