1
를로드하지 않습니다. 나는 꽤 오랫동안 이것을 고심하고 있었고 코드를 계속 바꿔 놓았고 아무 것도 작동하지 않았습니다. 나는 FireBug를 살펴보면 JSON이로드되는 것을 볼 수 있으며, FireBug를 사용하지 않으려 고했지만 여전히 아직 행운을 얻지는 못했다 ...는 ExtJS gridPanel는 여기 자습서를 다음했다 JSON
위의 튜토리얼을 따라 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
});