xml - Ext 4.2.1 使用 AJAX XML 阅读器加载 PHP 生成的 XML 文件
问题描述
我的目标是将 XML 加载到 Ext JS 中的 Store,然后在网格中显示数据。
我已经准备好生成 XML 数据的 PHP
<?php
/** create-xml.php */
$books = [
[
"isbn" => "9780071799355",
"title" => "Oracle Database 12c SQL",
"author" => "Jason Price"
],
[
"isbn" => "0672328666",
"title" => "Sams Teach Yourself Oracle PL/SQL in 10 Minutes",
"author" => "Ben Forta"
]
];
$dom = new DomDocument('1.0', 'UTF-8');
$root = $dom->createElement("books");
$dom->appendChild($root);
foreach ($books as $b) {
$book = $dom->createElement("book");
$isbn = $dom->createElement("isbn", $b["isbn"]);
$book->appendChild($isbn);
$title = $dom->createElement("title", $b["title"]);
$book->appendChild($title);
$author = $dom->createElement("author", $b["author"]);
$book->appendChild($author);
$root->appendChild($book);
}
//$dom->formatOutput = true;
echo $dom->saveXML();
显然,我检查了文件 create-xml.php 在本地主机上生成 XML
<?xml version="1.0" encoding="UTF-8"?>
<books><book><isbn>9780071799355</isbn><title>Oracle Database 12c SQL</title><author>Jason Price</author></book><book><isbn>0672328666</isbn><title>Sams Teach Yourself Oracle PL/SQL in 10 Minutes</title><author>Ben Forta</author></book></books>
我尝试将它加载到依赖于 ext-all-dev.js 的 JS 脚本中。
var xmlbookStore = Ext.create("Ext.data.Store", {
fields: ["isbn", "author", "title"],
autoLoad: true,
proxy: {
type: "ajax",
url: "create-xml.php",
//url: "books.xml",
reader: {
type: 'xml',
record: 'book',
rootProperty: 'books',
idPath: 'isbn'
}
}
});
console.log(xmlbookStore);
Ext.onReady(function () {
var grid = Ext.create("Ext.grid.Panel", {
store: xmlbookStore,
title: "Books",
columns: [
{
text: "ISBN",
dataIndex: "isbn"
},
{
text: "Author",
dataIndex: "author"
},
{
text: "Title",
dataIndex: "title"
}
],
renderTo: Ext.getBody()
});
});
我觉得奇怪的是,当我将数据源切换到普通的 XML 文件“books.xml”(从相同的数据生成并保存到光盘)时,完全相同的代码可以工作。
解决方案
解决方案:
当您使用 XML Reader 时,您的服务器响应必须以 XML 格式发回数据。我不知道这是否是最好的方法,但您可以尝试使用此方法(create-xml.php
文件中的另一行):
<?php
...
header('Content-type: text/xml');
echo $dom->saveXML();
?>
推荐阅读
- node.js - 向另一个进程发送信号
- maven - Maven依赖插件
- c# - Socket.Receive 有时只捕获数据包
- javascript - 外部键值对的 JSON 转换
- java - Vaadin:如何将验证设置为 false 以从侦听器形成
- postgresql - 上传声纳报告时出错:声纳扫描 - 500
- java - 如何将包含字符串列表(内部列表)的对象列表转换为字符串列表
- android - 单击 Recyclerview 对象图像视图时如何显示全屏图像?
- javascript - 调整 div 的背景图像大小以始终适合移动设备上的 div
- javascript - ReactJs:如何在渲染方法中使用映射函数处理空数组