2011-10-28 3 views
1

私はimdbからデータをロードしようとしていますが、テーブル(GridPanel)に結果がありません。 それは私のソースコードです:ExtJs loading data

... 
<body> 
<script type="text/javascript"> 
Ext.onReady(function(){ 

var store1 = new Ext.data.JsonStore({ 
    root: 'root', 
    idProperty: 'ID', 
    remoteSort: true, 
    fields: [ 
     'Title' 
    ], 
    // load using script tags for cross domain, if the data in on the same domain as 
    // this page, an HttpProxy would be better 
    proxy: new Ext.data.ScriptTagProxy({ 
     url: 'http://www.imdbapi.com/?t=True%20Grit' 
    }) 
}); 
// building grid panel 
}); 
</script> 
<div id="topic-grid"></div> 
... 

は、たぶん私はJsonStoreで「ルート」パラメータを変更する必要がありますか?


UPDATE

私はHTTPPROXYを使用しようとしましたありませんが、まだ結果。私は私のすべての体の内容を置くことは多分もっと有用であるかもしれない。

<script type="text/javascript"> 
Ext.onReady(function(){ 

var store1 = new Ext.data.JsonStore({ 

    reader: new Ext.data.JsonReader({ 
     fields: ['Title'], 
     root: 'rows' 
     }), 

    // load using script tags for cross domain, if the data in on the same domain as 
    // this page, an HttpProxy would be better 
    proxy: new Ext.data.HttpProxy({ 
     url: 'http://www.imdbapi.com/?t=True%20Grit' 
    }), 
    autoLoad: true 
    }); 

var grid1 = new Ext.grid.GridPanel({ 
    width:700, 
    height:500, 
    title:'ExtJS.com - Browse Forums', 
    store: store1, 
    trackMouseOver:false, 
    disableSelection:true, 
    loadMask: true, 

    // grid columns 
    columns:[{ 
     id: 'Title', 
     header: "Topic", 
     dataIndex: 'Title', 
     width: 420, 
     sortable: true 
    }] 
}); 


// render it 
grid1.render('topic-grid'); 

// trigger the data store load 
store1.load({params:{start:0, limit:25}}); 
}); 
</script> 
<div id="topic-grid"></div> 

答えて

3

ScriptTagProxyを使用すると、レスポンスから直接JSONを取得することはできません。あなたは実行可能なjavascriptしか手に入れることができません。残念なことに、imdbapiサイトは実行可能なjavascriptを返しません。また、HttpProxyを使用してクロスサイトスクリプティング(XSS)を行うことはできません。自分のローカルドメイン上のリソース(ファイルなど)にのみ接続できます。あなたのための

一つの可能​​性:

  1. プロキシが接続する独自のドメイン上のサーバー側のファイルを設定します。
  2. ScriptTagProxyの代わりに、サーバー側のファイルに接続するHttpProxyを使用します。

    proxy: new Ext.data.HttpProxy({ 
        url: '/path/to/my/server/file?t=True%20Grit' // the leading slash in 
                    // this url will begin from 
                    // your web server's root 
                    // directory for your 
                    // web-accessible files 
    }) 
    
  3. サーバー側のファイルを持っているクライアントと出力、クライアントにJSONとしてIMDBのAPIの結果に代わってIMDBのAPI呼び出しを行います。

    myServerSideFile 
    ================ 
    
    // harvest GET parameters, e.g., in your case, the query param 't' with value 
    // True%20Grit 
    
    // use the GET parameters to form a url with the GET params on the end, e.g., 
    // in your case, http://www.imdbapi.com/?t=True%20Grit 
    
    // call the imdb api using this url 
    
    // return the imdb api results as a JSON 
    

さまざまなサーバーサイド技術の上の提案を行うための詳細と例についてはthisを参照してください。

+0

-1はPHPの例を挙げています。利用可能なサーバサイドの言語がさらに多くあり、質問にはPHPでタグ付けされていません。具体的な言葉は言及すべきではない。これを修正すれば+1に変更されます。 – sra

+0

@sra PHPリファレンスを削除するように編集しました – Ryan

+0

@Ryan、情報ありがとうございますが、まだ空のテーブルがあります。私は更新されたコードを貼り付けた – bontade