ExtJS gridPanel 未加载 JSON

Question

我正在关注这里的教程： http://www.sencha.com/learn/Tutorial:Grid_PHP_SQL_Part3

但我还没有能够加载我的gridPanel。我已经为此苦苦挣扎了很长一段时间，我不断地改变我的代码，但没有任何效果。如果我查看 FireBug，我可以看到 JSON 加载，是的，我已经尝试禁用 FireBug，但仍然没有任何运气...

我已经遵循了上面的教程，引用了 ExtJS Cookbook，并查看了通过 Sencha 网站上的各种示例和 API 文档。

我感谢任何帮助，非常感谢你，

elshae

PHP 代码：

function getList() 
{
    global $DBConnect;
    $place_name_result = @pg_query($DBConnect, "SELECT place_names.location, place_names.name, language.name AS language, place_names.transliteration,
        place_names.english_translation, place_names.place_group, place_names.located_true, place_names.id AS place_names_id, category.name AS category, 
        category.id AS category_id FROM place_names, place_location, category, 
        language WHERE place_names.location = place_location.id AND place_location.category = category.id AND place_names.language = language.id;");

    $number_of_rows = pg_num_rows($place_name_result);

    if( $number_of_rows > 0 ){

        $place_names = array("total" => $number_of_rows, "results" => array());
        $i = 0;

        while (($place_name_records = pg_fetch_row($place_name_result)) && ($i < 100)) {

            //$place_names[] = $place_name_records;
            $place_names['results'][$i] = $place_name_records;
            $i++;
        }

        $jsonresult = JEncode($place_names);
        //echo '({"total":"'.$number_of_rows.'","results":'.$jsonresult.'})';
                //echo '{"total":'.$number_of_rows.',"results":'.$jsonresult.'}';
                echo $jsonresult;

    } elseif( $number_of_rows = 0 ) {
        echo '({"total":"0", "results":""})';
    } elseif(!$place_name_result){
        echo "An error occurred upon getting data from the place_names, place_location and category tables.\n";
        exit;
    }
}//End getList()    

function JEncode($arr){
    if (version_compare(PHP_VERSION,"5.2","<"))
    {    
        require_once("./JSON.php");   //if php<5.2 need JSON class
        $json = new Services_JSON();  //instantiate new json object
        $data=$json->encode($arr);    //encode the data in json format
    } else
    {
        $data = json_encode($arr);    //encode the data in json format
    }
    return $data;
}//End JEncode($arr)

//getList();

$task = '';

if (isset($_POST['task']) ){
    $task = $_POST['task'];   // Get this from Ext
}

switch($task){
    case "LISTING":              // Give the entire list
        getList();
        break;
    default:
        echo "{failure:true}";  // Simple 1-dim JSON array to tell Ext the request failed.
        break;
}

JS代码：

var placeNamesDataStore;         
var placeNamesColumnModel;     
var placeNamesListingEditorGrid;
var placeNamesListingWindow;

Ext.BLANK_IMAGE_URL = "../ext-3.3.1/resources/images/default/s.gif";

/*placeNamesDataStore = new Ext.data.JsonStore({
    storeId: 'placeNamesDataStore',
    url: 'tibetTestAdmin.php',      // File to connect to
    //method: 'POST',
    baseParams: {task: "LISTING"}, // this parameter asks for listing
    // we tell the datastore where to get data from
    root: 'results',
    totalProperty: 'total',
    idProperty: 'place_names_id',

    fields: [ 
      {name: 'location', type: 'int', mapping: 'location'},
      {name: 'name', type: 'string', mapping: 'name'},
      {name: 'language', type: 'string', mapping: 'language'},
      {name: 'transliteration', type: 'string', mapping: 'transliteration'},
      {name: 'english_translation', type: 'string', mapping: 'english_translation'},
      {name: 'place_group', type: 'int', mapping: 'place_group'},
      {name: 'located_true', type: 'bool', mapping: 'located_true'},
      {name: 'place_names_id', type: 'int', mapping: 'place_names_id'},
      {name: 'category', type: 'string', mapping: 'category'},
      {name: 'category_id', type: 'int', mapping: 'category_id'}
    ],
    sortInfo:{field: 'place_names_id', direction: "ASC"}

});*/


Ext.onReady(function(){

    Ext.QuickTips.init();

    placeNamesDataStore = new Ext.data.Store({
          id: 'placeNamesDataStore',
          proxy: new Ext.data.HttpProxy({
                    url: 'tibetTestAdmin.php',      // File to connect to
                    method: 'POST'
                }),
          baseParams: {task: "LISTING"}, // this parameter asks for listing
          reader: new Ext.data.JsonReader({   
                      // we tell the datastore where to get data from
            root: 'results',
            totalProperty: 'total',
            idProperty: 'place_names_id',

          fields: [ 
            {name: 'location', type: 'int', mapping: 'location'},
            {name: 'name', type: 'string', mapping: 'name'},
            {name: 'language', type: 'string', mapping: 'language'},
            {name: 'transliteration', type: 'string', mapping: 'transliteration'},
            {name: 'english_translation', type: 'string', mapping: 'english_translation'},
            {name: 'place_group', type: 'int', mapping: 'place_group'},
            {name: 'located_true', type: 'bool', mapping: 'located_true'},
            {name: 'place_names_id', type: 'int', mapping: 'place_names_id'},
            {name: 'category', type: 'string', mapping: 'category'},
            {name: 'category_id', type: 'int', mapping: 'category_id'}
          ]}),
          sortInfo:{field: 'place_names_id', direction: "ASC"}

    });

    placeNamesColumnModel = new Ext.grid.ColumnModel(
                [{
                    header: 'Location',
                    readOnly: true,
                    dataIndex: 'location', // this is where the mapped name is important!
                    width: 80,
                    hidden: false
                  },{
                    header: 'Place Name',
                    dataIndex: 'name',
                    width: 100,
                    editor: new Ext.form.TextField({  // rules about editing
                        allowBlank: false,
                        maxLength: 100,
                        maskRe: /([a-zA-Z0-9\s]+)$/   // alphanumeric + spaces allowed
                      })
                  },{
                    header: 'Language',
                    dataIndex: 'language',
                    width: 70,
                    editor: new Ext.form.TextField({
                      allowBlank: false,
                      maxLength: 50,
                      maskRe: /([a-zA-Z0-9\s]+)$/
                      })
                  },{
                    header: 'Transliteration',
                    dataIndex: 'transliteration',
                    width: 150,
                    editor: new Ext.form.TextField({  // rules about editing
                        allowBlank: false,
                        maxLength: 150,
                        maskRe: /([a-zA-Z0-9\s]+)$/   // alphanumeric + spaces allowed
                      })                   
                  },{
                    header: 'English Translation',
                    dataIndex: 'english_translation',
                    width: 200,
                    editor: new Ext.form.TextField({  // rules about editing
                        allowBlank: false,
                        maxLength: 200,
                        maskRe: /([a-zA-Z0-9\s]+)$/   // alphanumeric + spaces allowed
                      })     
                  },{
                    header: "Place Group",
                    dataIndex: 'place_group',
                    width: 80,
                    readOnly: true
                  },{
                    header: 'Located True',
                    dataIndex: 'located_true',
                    width: 80,
                    readOnly: true
                  },{
                    header: 'Place Names ID',
                    dataIndex: 'place_names_id',
                    width: 100,
                    readOnly: true              
                  },{
                    header: 'Category',
                    dataIndex: 'category',
                    width: 100,
                    editor: new Ext.form.TextField({  // rules about editing
                        allowBlank: false,
                        maxLength: 100,
                        maskRe: /([a-zA-Z0-9\s]+)$/   // alphanumeric + spaces allowed
                       })     
                  },{
                        header: "Category ID",
                        dataIndex: 'category_id',
                        width: 70,
                        readOnly: true,
                        hidden: true
                    }
                  ]
                );

    placeNamesColumnModel.defaultSortable= true;

    placeNamesListingEditorGrid =  new Ext.grid.EditorGridPanel({
          id: 'placeNamesListingEditorGrid',
          store: placeNamesDataStore,     // the datastore is defined here
          cm: placeNamesColumnModel,      // the columnmodel is defined here
          enableColLock:false,
          clicksToEdit:1,
          selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });

    placeNamesListingWindow = new Ext.Window({
          id: 'placeNamesListingWindow',
          title: 'Place Names of points in the Tibetan Autonomous Region',
          closable:true,
          width:1100,
          height:500,
          plain:true,
          layout: 'fit',
          items: placeNamesListingEditorGrid  // We'll just put the grid in for now...
    });

      placeNamesDataStore.load({// store loading is asynchronous, use a load listener or callback to handle results
                callback: function(){
                    Ext.Msg.show({
                        title: 'Store Load Callback',
                        msg: 'store was loaded, data available for processing',
                        modal: false,
                        icon: Ext.Msg.INFO,
                        buttons: Ext.Msg.OK
                    });
                }
      });      // Load the data
      placeNamesListingWindow.show();   // Display our window

});

Answer 1

我明白了...事实证明我的 JSON 格式不适合 JsonReader。我花了一段时间才弄清楚这一点，因为我的 JSON 格式是可以接受的，但不适合 JsonReader..

我有：

{"total":4537,"results":[["3353","\u0f66\u0fa3\u0f44\u0f0b\u0f62\u0fab\u0f7c\u0f44\u0f0b\u0f60\u0f56\u0fb2\u0f74\u0f0b\u0f66\u0fa3\u0f74\u0f58\u0f0b\u0f51\u0f7c\u0f0b\u0f51\u0f58\u0f0b\u0f60\u0f56\u0f56\u0f0b\u0f5a\u0f74\u0f42\u0f66\u0f0d","Tibetan","Nang Dzong Drunum Dodam Baptsuk ","Nang (Lang) County Grain and Oil Management Station","1522","f","3042","Administrative Management Unit","72"]]}

当我需要的是：

{"total":4537,"results":[{"location":"3353","name":"\u0f66\u0fa3\u0f44\u0f0b\u0f62\u0fab\u0f7c\u0f44\u0f0b\u0f60\u0f56\u0fb2\u0f74\u0f0b\u0f66\u0fa3\u0f74\u0f58\u0f0b\u0f51\u0f7c\u0f0b\u0f51\u0f58\u0f0b\u0f60\u0f56\u0f56\u0f0b\u0f5a\u0f74\u0f42\u0f66\u0f0d","language":"Tibetan","transliteration":"Nang Dzong Drunum Dodam Baptsuk ","english_translation":"Nang (Lang) County Grain and Oil Management Station","place_group":"1522","located_true":"f","place_names_id":"3042","category":"Administrative Management Unit","category_id":"72"}]}

而 PHP 代码是：

if( $number_of_rows > 0 ){

        $i = 0;

        while ($place_name_records = pg_fetch_row($place_name_result)) {

            $place_names[$i]['location'] = $place_name_records[0];
            $place_names[$i]['name'] = $place_name_records[1];
            $place_names[$i]['language'] = $place_name_records[2];
            $place_names[$i]['transliteration'] = $place_name_records[3];
            $place_names[$i]['english_translation'] = $place_name_records[4];
            $place_names[$i]['place_group'] = $place_name_records[5];
            $place_names[$i]['located_true'] = $place_name_records[6];
            $place_names[$i]['place_names_id'] = $place_name_records[7];
            $place_names[$i]['category'] = $place_name_records[8];
            $place_names[$i]['category_id'] = $place_name_records[9];

            $i++;
        }

        $jsonresult = json_encode($place_names);
        echo '{"total":'.$number_of_rows.',"results":'.$jsonresult.'}';

希望有一天这可以帮助别人！

干杯，

艾尔莎