Extjs Grid не показывает никаких данных - PullRequest
Новая
       8

Extjs Grid не показывает никаких данных

1 голос
/ 17 декабря 2010

Я создал следующий компонент сетки: 

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, является правильным.Данные извлекаются, и URL-адрес ListRelationshipMembers возвращает следующий код 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'
    });

Без изменений, таблица данных не заполняется записями

Ответы [ 3 ]

1 голос
/ 17 декабря 2010

Думаю, вам нужно сделать пару вещей здесь: во-первых, как упомянул Эван, вам нужно добавить в свой магазин ридер, например: 

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?Обратите внимание, что корень указывается в считывателе, а не в самом хранилище.

Затем в ваших столбцах я бы хотел добавить средство визуализации, чтобы явно определить, что будет отображаться каждый столбец, например: 

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

У меня есть привычка использовать средства визуализации, так как я довольно сильно изменяю содержимое ячеек столбцов в своих сетках.Обратите внимание, что аргументы передаются в функцию рендерера;Есть еще несколько, которые вы можете передать - смотрите ExtJS API , если вам нужна дополнительная информация о том, что вы можете получить на самом деле.С этой точки зрения документация по API довольно хороша - она ​​может занять некоторое время, но она определенно стоит вашего времени, если вы много работаете с ExtJS.

1 голос
/ 19 декабря 2010

Эван прав. Ваша самая большая проблема - нехватка читателя. Это и заглушка проверки, которую вы оставили там, чтобы вернуть 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'
            })
        });
    }
});
0 голосов
/ 17 декабря 2010

Вы не указали читателя в своем магазине, вам нужно указать рут в JsonReader.

...