PDA

View Full Version : JsonStore and Paging Toobar problem



h4r1
24 Nov 2011, 6:50 AM
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.



// 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"}]}



// 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!

mitchellsimoens
24 Nov 2011, 8:41 AM
Using Ext JS 3? If so I will move there, if not, what forum would you like me to move this to?

h4r1
24 Nov 2011, 5:42 PM
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.

h4r1
24 Nov 2011, 11:55 PM
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.


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
});

skirtle
25 Nov 2011, 1:17 AM
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.

h4r1
25 Nov 2011, 1:38 AM
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!

h4r1
25 Nov 2011, 6:49 AM
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.


$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);
}

dharmesh
6 Dec 2011, 2:20 AM
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.


$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,,,,,"