Question

我正在尝试使用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

我读过很多关于这个问题的文章，但从未找到解决方案...... 有人有解决方案吗？

感谢您的帮助。

Answer 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不起作用

1 个答案: