PDA

View Full Version : Stll Grid Paging



xdsongy
16 Dec 2009, 5:58 PM
Hi All,

I embed a Grid in a FormPanel and add paging feature to it. Everytime the client side paging event will send message like "start=120&limit=20" to the server script, while the php script can not retrieve start and limit (null values).

I am sure my PHP script is correct, because if put the same code into a standalone GridPanel, it works fine. And the post message from the client will look like:
start 120
limit 20

I am wondering whether this problem is caused by the Form?

Thank you!

CrazyEnigma
16 Dec 2009, 8:53 PM
Does your POST look like this:

start=120&limit=20

or

this:


start 120
limit 20


You should continue to post in your original thread.

xdsongy
17 Dec 2009, 4:42 AM
Hi, CrazyEnigma (http://www.extjs.com/forum/member.php?u=91843),

My POST looks like:
start=120&limit=20

if it looks like:

start 120
limit 20
I think everything will be fine. So, why it's "start=120&limit=20" is my POST?

Below is my code (it contains some Chinese chars, but will not impede your understanding ^_^):

OpenLayers.ProxyHost = "/cgi-bin/proxy.py?url=";

var mapPanel;

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'lib/extjs/resources/images/gray/s.gif'; // gray theme, not blue theme
Ext.QuickTips.init();
Ext.util.CSS.swapStyleSheet('theme-gray', 'lib/extjs/resources/css/xtheme-gray.css'); //Global theme selection
var ctrl, toolbarItems = [], action, actions = {};

var bounds = new OpenLayers.Bounds(588430.2387813567, 4913303.484828213, 610531.8279023392, 4928766.251023613);
var options = {
controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.Permalink('Permalink'), new OpenLayers.Control.MousePosition(), new OpenLayers.Control.KeyboardDefaults()],
maxExtent: bounds,
maxResolution: 86.33433250383769,
projection: "EPSG:26713",
units: 'm'
};

var map = new OpenLayers.Map('mappanel', options);

// ZoomToMaxExtent control, a "button" control
action = new GeoExt.Action({
control: new OpenLayers.Control.ZoomToMaxExtent(),
map: map,
cls: 'max_extent',
icon: 'images/icon_zoomfull.png',
tooltip: "??"
});
actions["max_extent"] = action;
toolbarItems.push(action);
toolbarItems.push("-");

//zoomin control
action = new GeoExt.Action({
control: new OpenLayers.Control.ZoomIn(),
map: map,
cls: 'zoomin',
icon: 'images/icon_zoomin.png',
tooltip: "??"
});
actions["zoomin"] = action;
toolbarItems.push(action);

//zoomout control
action = new GeoExt.Action({
control: new OpenLayers.Control.ZoomOut(),
map: map,
cls: 'zoomout',
icon: 'images/icon_zoomout.png',
tooltip: "??"
});
actions["zoomout"] = action;
toolbarItems.push(action);

// Pan control, a "button" control
action = new GeoExt.Action({
control: new OpenLayers.Control.Navigation(),
map: map,
cls: 'pan',
icon: 'images/icon_pan.png',
tooltip: "??"
});
actions["pan"] = action;
toolbarItems.push(action);

// Info control, a "button" control
action = new GeoExt.Action({
control: new OpenLayers.Control.WMSGetFeatureInfo(),
map: map,
cls: 'info',
icon: 'images/info.png',
tooltip: "????"
});
actions["info"] = action;
toolbarItems.push(action);
toolbarItems.push("-");

// Navigation history - two "button" controls
ctrl = new OpenLayers.Control.NavigationHistory();
map.addControl(ctrl);

action = new GeoExt.Action({
cls: 'previous',
icon: 'images/resultset_previous.png',
control: ctrl.previous,
disabled: true,
tooltip: "????"
});
actions["previous"] = action;
toolbarItems.push(action);

action = new GeoExt.Action({
cls: 'next',
icon: 'images/resultset_next.png',
control: ctrl.next,
disabled: true,
tooltip: "????"
});
actions["next"] = action;
toolbarItems.push(action);
toolbarItems.push("-");

// Display region selection control, a "comboBox" control
var regionCombo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
editable: false,
cls: 'regionCombo',
emptyText: '????...',
name: 'xixx',
title: '????????',
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: ['id', 'displayRegion'],
//???????'1,2,3,4'!!
data: [['607294,4923150,609150,4925696', '???'], ['1,2,3,5', '???'], ['1,2,3,6', '???'], ['1,2,3,7', '???'], ['1,2,3,8', '???'], ['1,2,3,9', '???']]
}),
valueField: 'id',
displayField: 'displayRegion'
});
toolbarItems.push("->");

// selection event handler
function zoomMap(minX, minY, maxX, maxY){
map.zoomToExtent(new OpenLayers.Bounds(minX, minY, maxX, maxY));
}

regionCombo.on('select', function(combo){
var extent = combo.value.split(",");
zoomMap(extent[0], extent[1], extent[2], extent[3]);
}, this);

// create a map panel with some layers that we will show in our layer tree
// below.
mapPanel = new GeoExt.MapPanel({
border: true,
region: "center",
extent: bounds,
tbar: [toolbarItems, regionCombo], //??????combobox
// we do not want all overlays, to try the OverlayLayerContainer
map: map,
//center: [146.1569825, -41.6109735],
zoom: 1,
layers: [new OpenLayers.Layer.WMS("road", "http://124.16.166.157:8081/geoserver/wms", {
layers: "sf:roads"
}, {
isBaseLayer: true
}, {
transitionEffect: 'resize'
}), new OpenLayers.Layer.WMS("streams", "http://124.16.166.157:8081/geoserver/wms", {
layers: "sf:streams",
transparent: true,
format: "image/gif"
}, {
isBaseLayer: false,
buffer: 0
}), new OpenLayers.Layer.WMS("restricted", "http://124.16.166.157:8081/geoserver/wms", {
layers: "sf:restricted",
transparent: true,
format: "image/gif"
}, {
isBaseLayer: false,
buffer: 0
}), new OpenLayers.Layer.WMS("archsites", "http://124.16.166.157:8081/geoserver/wms", {
layers: "sf:archsites",
transparent: true,
format: "image/gif"
}, {
isBaseLayer: false,
buffer: 0
})]
});

var layerList = new GeoExt.tree.LayerContainer({
text: '??',
layerStore: mapPanel.layers,
leaf: false,
expanded: true
});

var popup;
var info = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://124.16.166.157:8081/geoserver/wms',
title: 'Identify features by clicking',
queryVisible: true,
eventListeners: {
getfeatureinfo: function(event){
if (popup) {
map.removePopup(popup);
}
// Manage the features
if (event.text.length > 700) {
}
else {
// Doesn't show any popup if no features.
return;
}
popup = new OpenLayers.Popup.FramedCloud("chicken", map.getLonLatFromPixel(event.xy), null, event.text, null, true);
popup.autoSize = true;
map.addPopup(popup);
}
}
});
map.addControl(info);
info.activate();

//??????????“???”????????????
var subGoverments = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['ID', 'Goverment_CN'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'data/fillGovermentDivs.php'
}),
autoLoad: true
});

//??????????“????”????????????
var subFacilities = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['ID', 'FacilityType_CN'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'data/fillFacilities.php'
}),
autoLoad: true
});

//?????????Grid????
var gridQueryResults = new Ext.data.Store({
url: 'data/facilitiesQuery.php',
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'totalCount',
id: 'id'
}, ['id', 'name', 'address'])
});
gridQueryResults.load();


var viewport = new Ext.Viewport({
layout: 'fit',
renderTo: Ext.getBody(),
items: {
layout: "border",
deferredRender: false,
items: [mapPanel, {
region: 'north',
xtype: 'panel',
height: 100,
bodyStyle: 'background-image: url(../images/xiamen.png); background-repeat: no-repeat'
}, {
region: 'west',
xtype: 'panel',
collapsible: true,
collapseMode: 'mini',
split: true,
width: 350,
maxSize: 600,
layout: 'accordion',
layoutConfig: {
animate: true,
activeOnTop: true
},
items: [{
title: '????',
xtype: 'treepanel',
collapsed: true, //???????
animate: true,
containerScroll: true,
autoScroll: true,
border: false,
autoHeight: true,
iconCls: 'layerManager',
root: layerList,
split: true,
width: 200
}, {
title: '????',
iconCls: 'accordionSearch',
layout: 'border',
collapsed: true, //???????
autoScroll: true,
border: 'false',
items: [{
region: 'center',
height: 300,
split: true,
xtype: 'tabpanel',
border: 'false',
activeTab: 0,
items: [{
title: 'one',
html: 'tab 1'
}, {
title: 'two',
html: 'tab 2'
}, {
title: 'three',
html: 'tab 3'
}]
}]
}, {
xtype: 'form',
id: 'facilityQueryForm',
title: 'Function Group 3',
bodyStyle: 'padding:5px;',
url: 'data/facilitiesQuerySubmit.php',
items: [{
xtype: 'combo',
hiddenName: 'AdminRegion', //will be submitted to the server side
fieldLabel: '???',
triggerAction: 'all', //???????????combobox?????????
editable: false,
mode: 'local',
emptyText: '???...',
allowBlank: false,
blankText: '??????????',
store: subGoverments,
displayField: 'Goverment_CN',
valueField: 'ID', //combobox field value be submitted to the server side
anchor: '100%'
}, {
xtype: 'combo',
hiddenName: 'FacilityType',
name: 'type1',
fieldLabel: '????',
triggerAction: 'all',
editable: false,
mode: 'local',
emptyText: '???...',
allowBlank: false,
blankText: '???????????',
store: subFacilities,
displayField: 'FacilityType_CN',
valueField: 'ID',
anchor: '100%'
}, {
xtype: 'grid',
id: 'queryFormGrid',
store: gridQueryResults,
// hidden: true,
hideMode: 'visibility', //???????“autoExpandColumn”????????"hidden"???
//autoHeight: true,
height: 200,
enableColumnMove: true,
containerScroll: true,
autoScroll: true,
// layout: 'fit',
autoExpandColumn: 'facilityAddress', //?????????column?
anchor: '100%',
loadMask: true, //???????
columns: [{
id: 'facilityID', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "??",
dataIndex: 'id',
width: 100,
sortable: true
}, {
header: "??",
dataIndex: 'name',
width: 100
}, {
id: 'facilityAddress',
header: "??",
dataIndex: 'address'
}],
bbar: new Ext.PagingToolbar({
pageSize: 20, //The number of records to display per page (defaults to 20)
store: gridQueryResults,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
}],
buttons: [{
text: '??',
handler: function(){
Ext.getCmp('facilityQueryForm').getForm().submit({
success: function(f, a){
Ext.getCmp('queryFormGrid').setVisible(true); //??????Grid: hide() or show()
},
failure: function(f, a){
//Ext.Msg.alert('Warning', 'Error');
}
});
}
}, {
text: '??',
handler: function(){
Ext.getCmp('facilityQueryForm').getForm().reset();
Ext.getCmp('queryFormGrid').setVisible(false); //??????Grid: hide() or show()
}
}]
}]
}]
}
});

//Adding a loading mask
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({
remove: true
});
});

And, my PHP script code is as following:

<?php
error_reporting(0);
$start = ($_REQUEST['start'] != '') ? $_REQUEST['start'] : 0;
$limit = ($_REQUEST['limit'] != '') ? $_REQUEST['limit'] : 20;

$conn = pg_connect("host=124.16.166.157 port=5432 dbname=MyPostGIS user=postgres password=sos");

$count_sql = "SELECT * FROM cleanhouse";
$sql = $count_sql . " LIMIT ".$limit." OFFSET ".$start;

$arr = array();

If (!$rs = pg_query($sql)) {

Echo '{success:false}';

}else{

$rs_count = pg_query($count_sql);
$totalCount = pg_num_rows($rs_count);

while($obj = pg_fetch_object($rs)){
$arr[] = $obj;
}

Echo '{success:true,totalCount:'.$totalCount.',rows:'.json_encode($arr).'}';
}
?>


Any help will be thankful!

xdsongy
17 Dec 2009, 5:08 PM
Hi, below is my code, for clarity, I omited OpenLayers related parts. My POST message looks like :

start=120&limit=20

Hope these will be helpful to you to help me spot where is the error. Thank you!


Ext.onReady(function(){
//...previous codes are omitted

var gridQueryResults = new Ext.data.Store({
url: 'data/facilitiesQuery.php',
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'totalCount',
id: 'id'
}, ['id', 'name', 'address'])
});
gridQueryResults.load();

var viewport = new Ext.Viewport({
layout: 'fit',
renderTo: Ext.getBody(),
items: {
layout: "border",
deferredRender: false,
items: [mapPanel, {
region: 'north',
xtype: 'panel',
height: 100,
bodyStyle: 'background-image: url(../images/xiamen.png); background-repeat: no-repeat'
}, {
region: 'west',
xtype: 'panel',
collapsible: true,
collapseMode: 'mini',
split: true,
width: 350,
maxSize: 600,
layout: 'accordion',
layoutConfig: {
animate: true,
activeOnTop: true
},
items: [{
title: 'Layers',
xtype: 'treepanel',
collapsed: true,
animate: true,
containerScroll: true,
autoScroll: true,
border: false,
autoHeight: true,
iconCls: 'layerManager',
root: layerList,
split: true,
width: 200
}, {
title: 'Facility Query',
iconCls: 'accordionSearch',
layout: 'border',
collapsed: true,
autoScroll: true,
border: 'false',
items: [{
region: 'center',
height: 300,
split: true,
xtype: 'tabpanel',
border: 'false',
activeTab: 0,
items: [{
title: 'one',
html: 'tab 1'
}, {
title: 'two',
html: 'tab 2'
}, {
title: 'three',
html: 'tab 3'
}]
}]
}, {
xtype: 'form',
id: 'facilityQueryForm',
title: 'Function Group 3',
bodyStyle: 'padding:5px;',
url: 'data/facilitiesQuerySubmit.php',
items: [{
xtype: 'combo',
hiddenName: 'AdminRegion',
fieldLabel: 'Administration Region',
triggerAction: 'all',
editable: false,
mode: 'local',
emptyText: 'Please Select...',
allowBlank: false,
blankText: 'Administration Selection',
store: subGoverments,
displayField: 'Goverment_CN',
valueField: 'ID',
anchor: '100%'
}, {
xtype: 'combo',
hiddenName: 'FacilityType',
name: 'type1',
fieldLabel: 'Facility Type',
triggerAction: 'all',
editable: false,
mode: 'local',
emptyText: 'Please Select...',
allowBlank: false,
blankText: 'Select Facility Type',
store: subFacilities,
displayField: 'FacilityType_CN',
valueField: 'ID',
anchor: '100%'
}, {
xtype: 'grid',
id: 'queryFormGrid',
store: gridQueryResults,
hideMode: 'visibility',
height: 200,
enableColumnMove: true,
containerScroll: true,
autoScroll: true,
// layout: 'fit',
autoExpandColumn: 'facilityAddress',
anchor: '100%',
loadMask: true,
columns: [{
id: 'facilityID',
header: "ID",
dataIndex: 'id',
width: 100,
sortable: true
}, {
header: "NAME",
dataIndex: 'name',
width: 100
}, {
id: 'facilityAddress',
header: "ADDRESS",
dataIndex: 'address'
}],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: gridQueryResults,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
}],
buttons: [{
text: 'Submit',
handler: function(){
Ext.getCmp('facilityQueryForm').getForm().submit({
success: function(f, a){
Ext.getCmp('queryFormGrid').setVisible(true);
},
failure: function(f, a){
//Ext.Msg.alert('Warning', 'Error');
}
});
}
}, {
text: 'Reload',
handler: function(){
Ext.getCmp('facilityQueryForm').getForm().reset();
Ext.getCmp('queryFormGrid').setVisible(false);
}
}]
}]
}]
}
});

//Adding a loading mask
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({
remove: true
});
});


Server side PHP code is:

<?php
$start = ($_REQUEST['start'] != '') ? $_REQUEST['start'] : 0;
$limit = ($_REQUEST['limit'] != '') ? $_REQUEST['limit'] : 20;

$conn = pg_connect("host=124.16.166.157 port=5432 dbname=MyPostGIS user=postgres password=sos");

$count_sql = "SELECT * FROM cleanhouse";
$sql = $count_sql . " LIMIT ".$limit." OFFSET ".$start;

$arr = array();

If (!$rs = pg_query($sql)) {

Echo '{success:false}';

}else{

$rs_count = pg_query($count_sql);
$totalCount = pg_num_rows($rs_count);

while($obj = pg_fetch_object($rs)){
$arr[] = $obj;
}

Echo '{success:true,totalCount:'.$totalCount.',rows:'.json_encode($arr).'}';
}
?>

xdsongy
17 Dec 2009, 6:21 PM
Hi CrazyEnigma,

I try to re-paste my code here (I've tried that using direct url or params has no difference, POST message always looks like "start=120&limit=20"):



Ext.onReady(function(){
//...OpenLayers related codes are omitted.

var gridQueryResults = new Ext.data.Store({
url: 'data/facilitiesQuery.php',
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'totalCount',
id: 'id'
}, ['id', 'name', 'address'])
});
gridQueryResults.load();
//gridQueryResults.load({params:{start:0, limit:20}}); //same effect as using gridQueryResults.load()

var viewport = new Ext.Viewport({
layout: 'fit',
renderTo: Ext.getBody(),
items: {
layout: "border",
deferredRender: false,
items: [mapPanel, {
region: 'north',
xtype: 'panel',
height: 100,
bodyStyle: 'background-image: url(../images/xiamen.png); background-repeat: no-repeat'
}, {
region: 'west',
xtype: 'panel',
collapsible: true,
collapseMode: 'mini',
split: true,
width: 350,
maxSize: 600,
layout: 'accordion',
layoutConfig: {
animate: true,
activeOnTop: true
},
items: [{
title: 'Layers',
xtype: 'treepanel',
collapsed: true,
animate: true,
containerScroll: true,
autoScroll: true,
border: false,
autoHeight: true,
iconCls: 'layerManager',
root: layerList,
split: true,
width: 200
}, {
title: 'Facility Query',
iconCls: 'accordionSearch',
layout: 'border',
collapsed: true,
autoScroll: true,
border: 'false',
items: [{
region: 'center',
height: 300,
split: true,
xtype: 'tabpanel',
border: 'false',
activeTab: 0,
items: [{
title: 'one',
html: 'tab 1'
}, {
title: 'two',
html: 'tab 2'
}, {
title: 'three',
html: 'tab 3'
}]
}]
}, {
xtype: 'form',
id: 'facilityQueryForm',
title: 'Function Group 3',
bodyStyle: 'padding:5px;',
url: 'data/facilitiesQuerySubmit.php',
items: [{
xtype: 'combo',
hiddenName: 'AdminRegion',
fieldLabel: 'AdminRegion',
triggerAction: 'all',
editable: false,
mode: 'local',
emptyText: 'Select...',
allowBlank: false,
store: subGoverments,
displayField: 'Goverment_CN',
valueField: 'ID',
anchor: '100%'
}, {
xtype: 'combo',
hiddenName: 'FacilityType',
name: 'type1',
fieldLabel: 'Facility Type',
triggerAction: 'all',
editable: false,
mode: 'local',
emptyText: 'Select...',
allowBlank: false,
store: subFacilities,
displayField: 'FacilityType_CN',
valueField: 'ID',
anchor: '100%'
}, {
xtype: 'grid',
id: 'queryFormGrid',
store: gridQueryResults,
hideMode: 'visibility',
//autoHeight: true,
height: 200,
enableColumnMove: true,
containerScroll: true,
autoScroll: true,
autoExpandColumn: 'facilityAddress',
anchor: '100%',
loadMask: true,
columns: [{
id: 'facilityID',
header: "ID",
dataIndex: 'id',
width: 100,
sortable: true
}, {
header: "Name",
dataIndex: 'name',
width: 100
}, {
id: 'facilityAddress',
header: "Address",
dataIndex: 'address'
}],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: gridQueryResults,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
}],
buttons: [{
text: 'Submit',
handler: function(){
Ext.getCmp('facilityQueryForm').getForm().submit({
success: function(f, a){
Ext.getCmp('queryFormGrid').setVisible(true);
},
failure: function(f, a){
Ext.Msg.alert('Warning', 'Error');
}
});
}
}, {
text: 'Reset',
handler: function(){
Ext.getCmp('facilityQueryForm').getForm().reset();
Ext.getCmp('queryFormGrid').setVisible(false);
}
}]
}]
}]
}
});

Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({
remove: true
});
});


And, here is server side PHP code:



<?php
$start = ($_REQUEST['start'] != '') ? $_REQUEST['start'] : 0;
$limit = ($_REQUEST['limit'] != '') ? $_REQUEST['limit'] : 20;

$conn = pg_connect("host=124.16.166.157 port=5432 dbname=MyPostGIS user=postgres password=sos");

$count_sql = "SELECT * FROM cleanhouse";
$sql = $count_sql . " LIMIT ".$limit." OFFSET ".$start;

$arr = array();

If (!$rs = pg_query($sql)) {

Echo '{success:false}';

}else{

$rs_count = pg_query($count_sql);
$totalCount = pg_num_rows($rs_count);

while($obj = pg_fetch_object($rs)){
$arr[] = $obj;
}

Echo '{success:true,totalCount:'.$totalCount.',rows:'.json_encode($arr).'}';
}
?>

xdsongy
17 Dec 2009, 11:06 PM
Hi CrazyEnigma,

I try to re-paste my code here (I've tried that using direct url or params has no difference, POST message always looks like "start=120&limit=20"):



Ext.onReady(function(){
//...OpenLayers related codes are omitted.

var gridQueryResults = new Ext.data.Store({
url: 'data/facilitiesQuery.php',
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'totalCount',
id: 'id'
}, ['id', 'name', 'address'])
});
gridQueryResults.load();
//gridQueryResults.load({params:{start:0, limit:20}}); //same effect as using gridQueryResults.load()

var viewport = new Ext.Viewport({
layout: 'fit',
renderTo: Ext.getBody(),
items: {
layout: "border",
deferredRender: false,
items: [mapPanel, {
region: 'north',
xtype: 'panel',
height: 100,
bodyStyle: 'background-image: url(../images/xiamen.png); background-repeat: no-repeat'
}, {
region: 'west',
xtype: 'panel',
collapsible: true,
collapseMode: 'mini',
split: true,
width: 350,
maxSize: 600,
layout: 'accordion',
layoutConfig: {
animate: true,
activeOnTop: true
},
items: [{
title: 'Layers',
xtype: 'treepanel',
collapsed: true,
animate: true,
containerScroll: true,
autoScroll: true,
border: false,
autoHeight: true,
iconCls: 'layerManager',
root: layerList,
split: true,
width: 200
}, {
title: 'Facility Query',
iconCls: 'accordionSearch',
layout: 'border',
collapsed: true,
autoScroll: true,
border: 'false',
items: [{
region: 'center',
height: 300,
split: true,
xtype: 'tabpanel',
border: 'false',
activeTab: 0,
items: [{
title: 'one',
html: 'tab 1'
}, {
title: 'two',
html: 'tab 2'
}, {
title: 'three',
html: 'tab 3'
}]
}]
}, {
xtype: 'form',
id: 'facilityQueryForm',
title: 'Function Group 3',
bodyStyle: 'padding:5px;',
url: 'data/facilitiesQuerySubmit.php',
items: [{
xtype: 'combo',
hiddenName: 'AdminRegion',
fieldLabel: 'AdminRegion',
triggerAction: 'all',
editable: false,
mode: 'local',
emptyText: 'Select...',
allowBlank: false,
store: subGoverments,
displayField: 'Goverment_CN',
valueField: 'ID',
anchor: '100%'
}, {
xtype: 'combo',
hiddenName: 'FacilityType',
name: 'type1',
fieldLabel: 'Facility Type',
triggerAction: 'all',
editable: false,
mode: 'local',
emptyText: 'Select...',
allowBlank: false,
store: subFacilities,
displayField: 'FacilityType_CN',
valueField: 'ID',
anchor: '100%'
}, {
xtype: 'grid',
id: 'queryFormGrid',
store: gridQueryResults,
hideMode: 'visibility',
//autoHeight: true,
height: 200,
enableColumnMove: true,
containerScroll: true,
autoScroll: true,
autoExpandColumn: 'facilityAddress',
anchor: '100%',
loadMask: true,
columns: [{
id: 'facilityID',
header: "ID",
dataIndex: 'id',
width: 100,
sortable: true
}, {
header: "Name",
dataIndex: 'name',
width: 100
}, {
id: 'facilityAddress',
header: "Address",
dataIndex: 'address'
}],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: gridQueryResults,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
}],
buttons: [{
text: 'Submit',
handler: function(){
Ext.getCmp('facilityQueryForm').getForm().submit({
success: function(f, a){
Ext.getCmp('queryFormGrid').setVisible(true);
},
failure: function(f, a){
Ext.Msg.alert('Warning', 'Error');
}
});
}
}, {
text: 'Reset',
handler: function(){
Ext.getCmp('facilityQueryForm').getForm().reset();
Ext.getCmp('queryFormGrid').setVisible(false);
}
}]
}]
}]
}
});

Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({
remove: true
});
});



And, here is server side PHP code:



<?php
$start = ($_REQUEST['start'] != '') ? $_REQUEST['start'] : 0;
$limit = ($_REQUEST['limit'] != '') ? $_REQUEST['limit'] : 20;

$conn = pg_connect("host=124.16.166.157 port=5432 dbname=MyPostGIS user=postgres password=sos");

$count_sql = "SELECT * FROM cleanhouse";
$sql = $count_sql . " LIMIT ".$limit." OFFSET ".$start;

$arr = array();

If (!$rs = pg_query($sql)) {

Echo '{success:false}';

}else{

$rs_count = pg_query($count_sql);
$totalCount = pg_num_rows($rs_count);

while($obj = pg_fetch_object($rs)){
$arr[] = $obj;
}

Echo '{success:true,totalCount:'.$totalCount.',rows:'.json_encode($arr).'}';
}
?>

CrazyEnigma
21 Dec 2009, 12:55 PM
Posting all your code is not necessary.

I take it you will have to change your password, as you just posted your credentials.

So did you try adding POST. I know it defaults to 'POST'. I would explicitly state this in your config, rather than assume it. Also, I am not too sure that you specified your fields correctly.


var gridQueryResults = new Ext.data.Store({
url: 'data/facilitiesQuery.php',
reader: new Ext.data.JsonReader({
method: 'POST',
root: 'rows',
totalProperty: 'totalCount',
id: 'id',
fields: ['id', 'name', 'address']
})
});


This code has the same effect, because you used ? in php.


gridQueryResults.load();
gridQueryResults.load({params:{start:0, limit:20}}); //same effect as using gridQueryResults.load()