2

次のコードでは、ネストされたリストの静的データを取得します。しかし、静的データの代わりに、動的データ、つまりjspから取得したデータが必要です。どうすればいいのかわかりません。

Ext.define('SenchaApp.store.Items', {
    extend: 'Ext.data.TreeStore',

    config: {
        model: 'SenchaApp.model.Item',
        defaultRootProperty: 'items',
        root: {
            items: [
            {
                text: 'Categories1',
                items: [
                    {
                        text: 'Subcategories1',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories2',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories3',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories4',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },

                ]
            },
            {
                text: 'Categories2',
                items: [
                    {
                        text: 'Subcategories1',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories2',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories3',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories4',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },

                ]
            },
             {
                text: 'Categories3',
                items: [
                    {
                        text: 'Subcategories1',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories2',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories3',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories4',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },

                ]
            },
             {
                text: 'Categories4',
                items: [
                    {
                        text: 'Subcategories1',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories2',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories3',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },
                    {
                        text: 'Subcategories4',
                        items: [
                            { text: 'Product1', leaf: true },
                            { text: 'Product2', leaf: true },
                            { text: 'Product3', leaf: true },
                            { text: 'Product4', leaf: true }
                        ]
                    },

                ]
            },
        ]
    }
    }
});
4

1 に答える 1

0

実際、ここでは JSONP を使用する必要はありません。JSON リーダーで Ajax リクエストを使用する方がはるかに簡単です。

あなたのコードによると、モデル定義は次のようになるはずです。

Ext.define('SenchaApp.model.Item', {
        extend: 'Ext.data.Model',
        config: {
            fields: ['text'],
        }
});

次に、これはサーバーから JSONP をフェッチし、Store を満たします。

Ext.define('SenchaApp.store.Items', {
    extend: 'Ext.data.TreeStore',

    config: {
        model: 'SenchaApp.model.Item',
        proxy: {
            type: 'ajax',
            url: enter_your_api_url_here,
            extraParams: {set your extra params if needed},
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        },
        autoLoad: true,
    }
});

それが役に立てば幸い。

PS: うまくいかない場合は、jsonp ファイルのリンクをコピーしてここに貼り付けてください。お手伝いします。

于 2012-04-11T07:34:34.110 に答える