3

JSON データを NestedList にロードしようとしています。/app/store/Exhibits.js に次のストア ファイルがあります。

Ext.define('VisitTCMIndy.store.Exhibits',{
requires: ['VisitTCMIndy.model.Exhibit', 'Ext.data.proxy.JsonP'],
extend: 'Ext.data.TreeStore',
config: {
    model: 'VisitTCMIndy.model.Exhibit',
    proxy: {
        type: 'jsonp',
        url: 'http://www.example.com/explore.php',
        reader: {
            type: 'json',
            rootPropery: 'children'
        }
    }   
}
});

次に、/app/view/Explore.js の次のビューで参照します。

Ext.define('VisitTCMIndy.view.Explore', {
extend: 'Ext.Container',
requires: [
    'Ext.data.TreeStore',
    'Ext.dataview.NestedList',
    'VisitTCMIndy.store.Exhibits',
],
xtype: 'explorecard',
config: {
    iconCls: 'compass1',
    title: 'Explore',
    layout: 'fit',
    items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'Explore'
        },
        {
            xtype: 'nestedlist',
            fullscreen: true,
            store: 'VisitTCMIndy.store.Exhibits',
            detailCard: {
                html: 'Explore Details'
            },
            listeners: {
                leafitemtap: function(nestedList, list, index, target, record){
                    var detailCard = nestedList.getDetailCard();
                    detailCard.setHtml('Exhibit Title: '+ record.get('title'));
                }
            }
        }

    ]
}
});

ページに移動すると、次の警告と空のリストが表示されます。

[WARN][Ext.dataview.NestedList#applyStore] 指定されたストアが見つかりません

私の人生の前に、私は自分が間違っていることを理解できません。

4

1 に答える 1

5

Ok。app.jsファイルでストアとモデルを宣言する必要がありました。次に、クラス定義の残りの部分を除いた名前だけで私のストアを参照します。そこで、app.jsファイルに以下を追加しました。

models: ['Exhibit'],
stores: ['Exhibits'],

次に、更新されたExplore.jsビューファイルを示します。

Ext.define('VisitTCMIndy.view.Explore', {
extend: 'Ext.Container',
requires: [
    'Ext.data.TreeStore',
    'Ext.dataview.NestedList',
    'VisitTCMIndy.store.Exhibits',
],
xtype: 'explorecard',
config: {
    iconCls: 'compass1',
    title: 'Explore',
    layout: 'vbox',
    items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'Explore'
        },
        {
            xtype: 'nestedlist',
            store: 'Exhibits',
            title: 'Museum Levels',
            displayField: 'title',
            detailCard: {
                html: 'Explore Details'
            },
            listeners: {
                leafitemtap: function(nestedList, list, index, target, record){
                    var detailCard = nestedList.getDetailCard();
                    detailCard.setHtml('<div style="text-align:center;margin:.5em;"><img src="'+record.get('image')+'" alt="'+record.get('title')+'" />'+
                        '<p style="text-align:left;">'+record.get('text')+'</p></div>'
                    );
                }
            },
            flex: 1
        }

    ]
}
});

また、レイアウトをfitからvboxに変更したことに注意してください。これを実行し、データをロードしていることをリストに実際に表示するために、リストに1のフレックスを指定する必要がありました。

于 2013-02-15T18:55:23.947 に答える