ExtJs 加载数据
Posted
技术标签:
【中文标题】ExtJs 加载数据【英文标题】：ExtJs loading data 【发布时间】：2011-10-28 20:55:51 【问题描述】：我正在尝试从 imdb 加载数据，但我在表 (GridPanel) 中没有结果。 这是我的源代码：
...
<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 中的 'root' 参数？
更新
我尝试使用 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>
【问题讨论】：
【参考方案1】：使用 ScriptTagProxy 时，您无法直接从响应中获取 JSON。您只能获取可执行的 javascript，不幸的是，imdbapi 站点不返回可执行的 javascript。此外，您不能使用 HttpProxy 进行跨站点脚本 (XSS)。您只能连接到您自己本地域上的资源（例如文件）。
一种可能性：
-
在您自己的域上设置一个服务器端文件，您的代理将连接到该文件。
使用与您的服务器端文件联系的 HttpProxy，而不是 ScriptTagProxy。
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
)
让您的服务器端文件代表客户端调用 imdb api，并将 imdb api 的结果作为 JSON 输出回客户端。
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。
【讨论】：
-1 仅提及一个 php 示例。还有更多可用的服务器端语言，并且该问题没有用 PHP 标记。不应提及特定语言。如果您解决此问题，我会将其更改为 +1。 @Ryan，感谢您提供信息，但我的桌子仍然空着。我粘贴了我更新的代码 问题是您正在尝试执行跨站点脚本（XSS），而 HttpProxy 无法执行此操作。我的建议是您在您的域上创建一个服务器端文件，您使用 HttpProxy 连接到该文件。然后，该服务器端文件将在幕后进行 imdbapi 调用，然后将结果作为 JSON 返回给您的 HttpProxy。所以，最后，你的 HttpProxy 不会直接连接到 imdbapi :) 感谢@Ryan，但最后我通过从 imdb 获取 XML 数据并使用 XMLReader 服务解决了这个问题以上是关于ExtJs 加载数据的主要内容，如果未能解决你的问题，请参考以下文章