1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    h4r1 is on a distinguished road

      0  

    Question JsonStore and Paging Toobar problem

    JsonStore and Paging Toobar problem


    Hi, I'm newbie here ...


    Just try to create a simple program like this:
    1. Create a PHP script to generate Json data from a MySQL table
    2. Read the data from step 1 into JsonStore
    3. Show the records from step 2 to a grid with paging toolbar
    The problem is the paging is not working, it keeps reading the whole data.


    Code:
    // data2.php
    <?php
    include('connect.php');
    
    
    // just 2 data to simplify
    $query = "SELECT club_id, club_name FROM club where club_id = 196 or club_id = 197";
    $result = mysql_query($query, $con); 
    $total = mysql_num_rows($result);
    
    
    if ($total > 0){
        while($obj = mysql_fetch_object($result))
            {
                $arr[] = $obj;
            }
    
    
        $myData = array('totalCount' => $total, 'myClub' => $arr);
        echo json_encode($myData);
    }
    ?>
    PHP output:
    {"totalCount":2,"myClub":[{"club_id":"196","club_name":"Athletic"},{"club_id":"197","club_name":"Barcelona"}]}

    Code:
    // the extJS, using version 3
    var MyPageSize = 1;  // to simplify
    
    var MyStore = new Ext.data.JsonStore ({
        fields: ['club_id', 'club_name'],
        url: 'data2.php',
        root: 'myClub',
        /* error??? "data2.php:1 Uncaught SyntaxError: Unexpected token :"
        proxy: new Ext.data.ScriptTagProxy({
            url: 'data2.php'
        }),
        */
        totalProperty: 'totalCount',
        autoLoad: false,
        remoteSort: true
    });
    MyStore.setDefaultSort('club_id', 'asc');
    
    var mycolModel = new Ext.grid.ColumnModel({
      columns: [{header: 'id', dataIndex: 'club_id', sortable: true},
                {header: 'Name',  dataIndex: 'club_name', sortable: true}
               ]
    });
    
    var MyPaging = new Ext.PagingToolbar({
            store: MyStore,       // grid and PagingToolbar using same store
            displayInfo: true,
            pageSize: MyPageSize
        });
    
    var grid = new Ext.grid.GridPanel({
            store: MyStore,
            width: 600,
            height:300,
            colModel: mycolModel,
            bbar: MyPaging,
    });
    
    
    //And finally, we render our grid 
    grid.render('db-grid'); 
    
    
    MyStore.load({
    params : {
        start : 0,
        limit : MyPageSize
        }
    });
    So, I encountered 2 problems here:
    1. on Ext.data.JsonStore, it generates an error when using ScriptTagProxy.
    What's the difference between using url property on Ext.data.JsonStore and url on Ext.data.ScriptTagProxy?
    2. MyPageSize is ignored, the grids always shows all data, the PagingToolBar is not working.


    Thanks for the help!
    Last edited by h4r1; 24 Nov 2011 at 6:54 AM. Reason: typo

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,059
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Using Ext JS 3? If so I will move there, if not, what forum would you like me to move this to?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    h4r1 is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Using Ext JS 3? If so I will move there, if not, what forum would you like me to move this to?
    Mitchell,

    Please forgive me if I posted on the wrong forum since I'm new here. You can move to the appropriate forum, I'll just follow. As long as I have the solution I'll be very grateful.

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    h4r1 is on a distinguished road

      0  

    Default


    Quote Originally Posted by h4r1 View Post
    1. on Ext.data.JsonStore, it generates an error when using ScriptTagProxy.
    What's the difference between using url property on Ext.data.JsonStore and url on Ext.data.ScriptTagProxy?
    While waiting this thread to be moved, I found the answer for the first one. Use Ext.data.ScriptTagProxy if only we use cross domain. Because I'm working on localhost this will result an error. The solution is using Ext.data.HttpProxy instead.

    Code:
    var MyStore = new Ext.data.JsonStore ({
        fields: ['club_id', 'club_name'],
        root: 'myClub',
        /* cannot use this, error: "data2.php:1 Uncaught SyntaxError: Unexpected token :"
        proxy: new Ext.data.ScriptTagProxy({
            url: 'data2.php'
        }),
        */
        proxy: new Ext.data.HttpProxy({
            url: 'data2.php'
        }),
    
    
        totalProperty: 'totalCount',
        autoLoad: false,
        remoteSort: true
    });

  5. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    As far as I can tell your server is ignoring the page size. The page size will be passed as a request parameter to the server and responsibility for returning the requested number of results lies solely with the server. If you return 2 results then the store will contain 2 results, no matter what the page size.

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    h4r1 is on a distinguished road

      0  

    Default


    Quote Originally Posted by skirtle View Post
    As far as I can tell your server is ignoring the page size. The page size will be passed as a request parameter to the server and responsibility for returning the requested number of results lies solely with the server. If you return 2 results then the store will contain 2 results, no matter what the page size.
    Now that makes sense to me. So my PHP script should read the parameter and act accordingly.
    Thanks Skritle!

  7. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    h4r1 is on a distinguished road

      0  

    Default


    The problem is finally solved . This is the pitfall of many persons (including me) who tried to create a similar application, because they focused on the ExtJS, while the problem actually laid on the PHP that generates the data.

    So, here it is the PHP script. The key is on these two parameters, start and limit, which sent to the PHP by ExtJS.

    Code:
    $query = "SELECT club_id, club_name FROM club";
    // get total records
    $result = mysql_query($query); 
    $total = mysql_num_rows($result);
    
    
    if (!isset($_POST['start']) && !isset($_GET['start']))
      $start = 0;
    else
      $start = (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
    
    
    if (!isset($_POST['limit']) && !isset($_GET['limit']))
      $limit = $total;
    else
      $limit = (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
    
    // get limited records based on the parameters
    $querylimit = $query." limit ".$start.",".$limit; 
    $result = mysql_query($querylimit); 
    
     if ($total > 0){
        while($obj = mysql_fetch_object($result))
            {
                $arr[] = $obj;
            }
    
    // Now create the json array to be sent to our datastore
    $myData = array('total' => $total, 'records' => $arr);
    echo json_encode($myData);
    }

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    1
    Vote Rating
    0
    dharmesh is on a distinguished road

      0  

    Smile PHP Vs Store

    PHP Vs Store


    Quote Originally Posted by h4r1 View Post
    The problem is finally solved . This is the pitfall of many persons (including me) who tried to create a similar application, because they focused on the ExtJS, while the problem actually laid on the PHP that generates the data.

    So, here it is the PHP script. The key is on these two parameters, start and limit, which sent to the PHP by ExtJS.

    Code:
    $query = "SELECT club_id, club_name FROM club";
    // get total records
    $result = mysql_query($query); 
    $total = mysql_num_rows($result);
    
    
    if (!isset($_POST['start']) && !isset($_GET['start']))
      $start = 0;
    else
      $start = (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
    
    
    if (!isset($_POST['limit']) && !isset($_GET['limit']))
      $limit = $total;
    else
      $limit = (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
    
    // get limited records based on the parameters
    $querylimit = $query." limit ".$start.",".$limit; 
    $result = mysql_query($querylimit); 
    
     if ($total > 0){
        while($obj = mysql_fetch_object($result))
            {
                $arr[] = $obj;
            }
    
    // Now create the json array to be sent to our datastore
    $myData = array('total' => $total, 'records' => $arr);
    echo json_encode($myData);
    }
    I personaly thanks to sencha for this great job which helped me so much but this one is not good idea every time for changing the page it will go and hit the server and and goes for DB connection ,,,, This reduce the performance if there are huge no of data's and the query is little diff to write. "I like to perform these operation as ,all the data's should load in Store and on moving to next page it should load data's from store not from that php,,,,,"