EXT JS：JSON 不起作用
Posted
技术标签:
【中文标题】EXT JS：JSON 不起作用【英文标题】：EXT JS : JSON doesn't work 【发布时间】：2012-08-17 15:49:56 【问题描述】：我正在尝试使用 EXT JS 创建 Web 应用程序。我按照本教程在我的 WAMP 服务器上安装 EXT JS：http://www.objis.com/formation-java/tutoriel-ajax-extjs.html
我下载了 EXT JS 并将其复制到我的文件夹 C:\wamp\www\lib。 php.ini 的 include_path 似乎是正确的：我有文件夹 C:\wamp\www\lib。
然后我尝试了一个基本教程，用数据库（进度数据库）中的数据填充 GridPanel：http://tutoriel.lyondev.fr/pages/45-GridPanel-simple.html
php文件是：
<?php
// connexion à la base de données
$connexion = odbc_connect("FILEDSN=C:\Program Files\Fichiers communs\ODBC\Data Sources\comptaLocal102B.dsn;Uid=$user;Pwd=$password;", $user, $password);
if ($connexion == 0)
echo "ERREUR";
else
// Query
$qry = "SELECT cjou, npiece FROM PUB.tlgecrit WHERE tlgecrit.idsoc = 'OCR'";
// Get Result
$result = odbc_exec($connexion,$qry);
// Get Data From Result
while ($row = odbc_fetch_array($result))
$data[]=$row;
//retourne le tableau en JSON
$return['rows'] = $data;
echo json_encode($return);
// Free Result
odbc_free_result($result);
// Close Connection
odbc_close($connexion);
?>
js文件是：
Ext.onReady(function()
var mesChampsDeDonnees = [
name: 'cjou',
name: 'npiece'
];
var monStore = new Ext.data.JsonStore(
root: 'rows',
idProperty: 'npiece',
fields:mesChampsDeDonnees,
urlAppend:'histo_compte_piece.php',
autoLoad:true
);
var mesColonnes = [
header: 'Journal', width: 200, dataIndex: 'cjou',sortable: true,
header: 'N° pièce', width: 200, dataIndex: 'npiece',sortable: true
];
var monGridPanel = new Ext.grid.GridPanel(
autoHeight:true,
renderTo:Ext.getBody(),
store:monStore,
columns:mesColonnes
);
monGridPanel.show();
);
最后我的 html 文件是：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<head>
<link rel="stylesheet" type="text/css" href="/lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/lib/extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/lib/extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript" src="/lib/extjs/src/locale/ext-lang-fr.js"></script>
<script type="text/javascript" src="histo_compte_piece.js"></script>
</head>
</head>
<body>
</body>
</html>
我尝试了许多其他教程，但都没有奏效。似乎 JSON 不起作用。网格与列标签可见，但始终只有一个空行。
当我在 Firebug 中检查错误时，会出现一个：
Erreur : TypeError: url is undefined
Fichier Source : /lib/extjs/ext-all-debug-w-comments.js
Ligne : 1241
我阅读了很多关于这个问题的文章，但从未找到解决方案...... 有人有解决办法吗？
感谢您的帮助。
【问题讨论】：
您的代码不正确。商店需要一个代理来与服务器通信，并且您没有将数据序列化为 json。等一下，我会重写你的代码并发布一个例子。 【参考方案1】：您似乎没有将数据格式化为 JSON，并且您的代码存在一些问题（这也不完整）。我试图修复它。看看：
// this is the object structure that will be returned by the server
var testData = rows: [
cjou: "a", npiece: "b"
,
cjou: "c", npiece: "d"
];
var monStore = new Ext.data.JsonStore(
fields: [ "cjou", "npiece" ],
autoLoad: true,
proxy:
type: "ajax",
url: "/echo/json/", // here you will change to your url
reader:
type: "json",
root: "rows",
idProperty: "npiece",
,
// some configs to use jsFiddle echo service (you will remove them)
actionMethods:
read: 'POST'
,
extraParams:
// sending json to the echo service (it will return the same data)
json: JSON.stringify( testData )
);
var mesColonnes = [
header: 'Journal', width: 200, dataIndex: 'cjou',sortable: true,
header: 'N° pièce', width: 200, dataIndex: 'npiece',sortable: true
];
var monGridPanel = new Ext.grid.GridPanel(
autoHeight: true,
renderTo: Ext.getBody(),
store: monStore,
columns: mesColonnes
);
你可以在这里看到一个活生生的例子：http://jsfiddle.net/davidbuzatto/NN6By/
【讨论】：
以上是关于EXT JS：JSON 不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Ext Js，Ext.Ajax.request 在移动设备上不起作用