ExtJS Grid zeigt keine Daten

Question

Ich habe die folgende Gitterkomponente:

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

Das Gitter macht richtig, und die URL, die auf MyAppUrls.ListRelationshipMembers abgebildet ist richtig. Die Daten abgerufen werden, und die ListRelationshipMembers URL zurückgibt die folgende JSON:

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

Doch obwohl das Gitter gerendert wird (Spalt, Grenzen, etc ..) keine Daten jedoch in dem eigentlichen Gitter zeigen. Da dies mein erstes Mal ist ein Datenspeicher verwendet wird, bin ich nicht sicher, was ich falsch mache. Jede Hilfe wäre dankbar.

Bearbeiten :

Ich habe versucht, den Laden zu aktualisieren einen Leser über den folgenden Code hat:

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

Keine Änderung wird das Datenraster nicht mit den Datensätzen gefüllt werden

Answer 1

Evan ist richtig. Ihr größtes Problem ist der Mangel an einem Leser. Das und die Validierung Stummel Sie dort links true zurück benötigt. Wenn Sie nicht nur diesen Code fallen kann und haben es arbeiten Sie ein anderes Problem haben.

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

Denken Sie brauchen hier ein paar Dinge zu tun: erstens, wie Evan erwähnt, benötigen Sie einen Leser zu Ihrem Geschäft hinzuzufügen, wie folgt aus:

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

Ich habe den Speichertyp hier etwas einfacher geändert - gab es einen bestimmten Grund, warum Sie GroupingStore verwendet haben? Beachten Sie, dass die Wurzel in dem Leser angegeben, nicht der Laden selbst.

Dann in Ihren Spalten, würde ich dazu neigen, einen Renderer hinzufügen explizit bestimmen, was jede Spalte wird angezeigt, wie zum Beispiel:

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

Ich habe angewöhnt Renderer zu verwenden, da ich den Inhalt meiner Spalte Zellen sehr stark in meinem Gitter ändern. Beachten Sie hier die Argumente an die Renderer-Funktion übergeben werden; gibt es ein paar mehr werden Sie in geben können - siehe die ExtJS API wenn Sie weitere Informationen darüber, was können Sie tatsächlich Zugang. In diesem Sinne ist die API-Dokumentation ziemlich gut - es einige graben in nehmen kann, aber auf jeden Fall wert Ihre Zeit, wenn Sie mit ExtJS viel arbeiten

.

Answer 3

Sie haben keine Leser auf Ihrem Speicher angegeben, müssen Sie die Wurzel in dem JsonReader angeben.