2

EXTJSを使用して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。

次に、データベース（Progress Database）からのデータで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が機能しないようです。グリッドは列ラベルとともに表示されますが、常に空の行が1つだけあります。

Firebugでエラーを確認すると、次のエラーが表示されます。

Erreur : TypeError: url is undefined
Fichier Source : /lib/extjs/ext-all-debug-w-comments.js
Ligne : 1241

私はこの問題について多くの記事を読みましたが、解決策を見つけることはありません...誰かが解決策を持っていますか？

手伝ってくれてありがとう。

4

1 に答える 1

2

データを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/

于 2012-08-17T17:16:43.277 に答える