Pregunta

Estaba siguiendo el tutorial aquí:http://www.sencha.com/learn/tutorial:grid_php_sql_part3

Pero no he podido cargar mi gridpanel. He estado luchando con esto durante bastante tiempo y sigo cambiando mi código y nada funciona. Puedo ver que el JSON se carga si miro en Firebug, y sí, he intentado deshabilitar Firebug y todavía tengo que tener suerte ...

He seguido el tutorial anterior, he hecho referencia al libro de cocina EXTJS y he revisado los diversos ejemplos y documentos de API en el sitio de Sencha.

Agradezco cualquier ayuda y muchas gracias,

Elshae

Screenshot of EditorGridPanel

Código 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;
}

Código 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

});

No hay solución correcta

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top