extjsグリッドにはデータが表示されません

StackOverflow https://stackoverflow.com/questions/4467582

  •  11-10-2019
  •  | 
  •  

質問

次のグリッドコンポーネントを作成しました。

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 正しい。データは取得されています 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'
    });

変更はありません、Datagridはレコードで満たされていません

役に立ちましたか？

解決

エヴァンは正しいです。あなたの最大の問題は、読者の欠如です。それとそこに残った検証スタブは、真実を返す必要がありました。このコードをドロップしてそれを機能させることができない場合は、他にも問題があります。

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

他のヒント

ここでいくつかのことをする必要があると思います。まず、エヴァンが述べたように、このように読者をあなたの店に追加する必要があります。

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をたくさん取り組んでいるなら、間違いなくあなたの時間の価値があります。

ストアでリーダーを指定していないため、JSONReaderのルートを指定する必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top