Results 1 to 7 of 7

Thread: Stll Grid Paging

  1. #1

    Question Stll Grid Paging

    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!

  2. #2
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638

    Default

    Does your POST look like this:
    Code:
    start=120&limit=20
    or

    this:
    Code:
    start 120
    limit 20
    You should continue to post in your original thread.

  3. #3

    Default

    Hi, CrazyEnigma,

    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: "sftreams",
    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!

  4. #4

    Question

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

  5. #5

    Default

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

  6. #6

    Default

    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"):

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

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

  7. #7
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638

    Default

    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.
    Code:
        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.
    Code:
        gridQueryResults.load();
        gridQueryResults.load({params:{start:0, limit:20}});  //same effect as using gridQueryResults.load()

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •