CODEWITHSUNDEEP
jsonextjsextjs3
lilpeach
lilpeach

Reputation: 25

EXT JS : JSON doesn't work

I'm trying to use EXT JS to create a web application. I followed this tutorial to install EXT JS on my WAMP server : http://www.objis.com/formation-java/tutoriel-ajax-extjs.html

I downloaded EXT JS and copied it on my folder C:\wamp\www\lib. The include_path of php.ini seems to be right : I had the folder C:\wamp\www\lib.

Then I tried a basic tutorial to fill a GridPanel with data from a database (Progress Database) : http://tutoriel.lyondev.fr/pages/45-GridPanel-simple.html

The php file is :

<?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);
}
?>

and the js file is :

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();
});

and finally my html file is :

<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>

I tried many other tutorials and it never worked. It seems like JSON doesn't work. The grid is visible with the column labels but there is always one only empty line.

When I check errors in Firebug one appears :

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

I read many articles about this problem but never find a solution ... Do anybody have a solution ?

Thanks for help.

Upvotes: 2

Views: 2293

Answers (1)

davidbuzatto
davidbuzatto

Reputation: 9444

It seems that you are not formatting your data as JSON and you have some problems with your code (that is incomplete too). I tried to fix it. Take a look:

// 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
});

You can see a live example here: http://jsfiddle.net/davidbuzatto/NN6By/

Upvotes: 2

Related Questions