ExtJS griglia non mostra alcun dato

Question

Ho creato il seguente componente di griglia:

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 griglia rende correttamente e l'URL mappato MyAppUrls.ListRelationshipMembers è corretta. I dati vengono recuperate, e l'URL ListRelationshipMembers sta tornando il seguente JSON:

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

Tuttavia, anche se la griglia è reso (colonne, bordi, ecc ..) non ci sono dati sta mostrando nella griglia attuale però. Dal momento che questa è la mia prima volta con un archivio di dati, non sono sicuro di quello che sto facendo male. Qualsiasi aiuto sarebbe riconoscente.

Modifica :

Ho provato ad aggiornare il negozio di avere un lettore tramite il seguente codice:

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

Nessun cambiamento, il datagrid è non essere riempito con i record

Answer 1

Evan è corretta. Il tuo più grande problema è la mancanza di un lettore. Questo, e il mozzicone di convalida che hai lasciato in ci doveva restituire true. Se non si può semplicemente abbandonare questo codice e farlo funzionare hai qualche altro problema.

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

che hai bisogno di fare un paio di cose qui: in primo luogo, come detto da Evan, è necessario aggiungere un lettore per il tuo negozio, in questo modo:

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

Ho cambiato il tipo di archivio qui per qualcosa di più semplice - c'era un motivo particolare che si stava utilizzando GroupingStore? Si noti che la radice è specificato nel lettore, non il negozio stesso.

Poi, nelle vostre colonne, mi piacerebbe tendono ad aggiungere un renderer per determinare in modo esplicito ciò che verrà visualizzato ogni colonna, come ad esempio:

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

Ho preso l'abitudine di usare renderer, da quando ho modificare il contenuto delle mie cellule delle colonne piuttosto pesantemente nei miei griglie. Si noti qui gli argomenti di essere passati alla funzione di rendering; ci sono un paio di più è possibile passare - vedi la ExtJS API se avete bisogno di maggiori informazioni su ciò che si può effettivamente accedere. In tal senso, la documentazione delle API è piuttosto buona - si può prendere un po 'scavare in, ma sicuramente vale la pena il vostro tempo se si sta lavorando con ExtJS molto

.

Answer 3

Non è stato specificato un lettore sul tuo negozio, è necessario specificare la radice nella JsonReader.