EXT JS：JSON 不起作用答案

【问题标题】：EXT JS : JSON doesn't workEXT JS：JSON 不起作用
【发布时间】：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。等一下，我会重写你的代码并发布一个例子。

标签： json extjs extjs3

【解决方案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/

【讨论】：