ここのチュートリアルに従っていました: http://www.sencha.com/learn/Tutorial:Grid_PHP_SQL_Part3
しかし、gridPanel を読み込めませんでした。私はかなり長い間これに苦労しており、コードを変更し続けていますが、何も機能していません。FireBug を見ると JSON が読み込まれていることがわかります。はい、FireBug を無効にしようとしましたが、まだ運がありません...
上記のチュートリアルに従い、ExtJS クックブックを参照し、Sencha サイトのさまざまな例と API ドキュメントに目を通しました。
私はどんな助けにも感謝し、どうもありがとうございました.
エルシェ
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
});