ExtJS gridPanel is not loading JSON

Question

I was following the tutorial here: http://www.sencha.com/learn/Tutorial:Grid_PHP_SQL_Part3

But I have not been able to load my gridPanel. I've been struggling with this for quite a while now and I keep changing my code around and nothing is working. I can see that the JSON loads if I look in FireBug, and yes I have tried disabling FireBug and still I've yet to have any luck...

I've have followed the above tutorial, referenced the ExtJS Cookbook, and have looked through the various examples and API docs on the Sencha site.

I appreciate any help and thank you very much,

elshae

PHP Code:

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

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

I got it...turns out my JSON wasn't formatted properly for the JsonReader. Took me a while to figure this out since my JSON format was acceptable, but just not right for the JsonReader..

I had:

{"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"]]}

When what I needed was:

{"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"}]}

And the PHP code for that was:

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.'}';

Hope this helps someone one day!

Cheers,

elshae