2012-08-17 4 views
2

EXT JS를 사용하여 웹 응용 프로그램을 만들려고합니다. 이 튜토리얼을 따라 WAMP 서버에 EXT JS를 설치했습니다 : http://www.objis.com/formation-java/tutoriel-ajax-extjs.htmlEXT JS : JSON이 작동하지 않습니다.

EXT JS를 다운로드하여 내 폴더 C:\wamp\www\lib에 복사했습니다. php.ini의 include_path가 옳은 것 같습니다 : 나는 C:\wamp\www\lib이라는 폴더를 가졌습니다. 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 파일은 다음과 같습니다

은 그 때 나는 데이터베이스 (진행 데이터베이스)에서 데이터와 GridPanel을 채우기 위해 기본적인 튜토리얼을 시도
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이 작동하지 않는 것 같습니다. 격자는 열 레이블과 함께 표시되지만 항상 빈 행 하나만 있습니다.

나는 방화범 하나의 오류를 확인 나타납니다

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

나는이 문제에 대한 많은 기사를 읽을 수는 있지만 솔루션 ... 아무도 해결책을 가지고 있습니까를 찾을 수 없을?

도움 주셔서 감사합니다.

+0

귀하의 코드가 올바르지 않습니다. 저장소는 서버와 통신하기 위해 프록시가 필요하며 사용자는 json에 데이터를 직렬화하지 않습니다. 잠깐, 코드를 다시 작성하고 예제를 게시합니다. – davidbuzatto

답변

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/

+0

나를 도와 주셔서 감사합니다. 그것은 작동합니다! – lilpeach

+0

안녕하세요. – davidbuzatto