I tried the 3.2.1 versions and they also work....just the 3.3 version of EXT JS are broken for use with the livegrid.
Also...maybe this is really obvious to everyone else, but I had trouble figuring out what format the grid expected the data back in, so I thought I would post my PHP code to save someone else the trouble.
Here is the PHP MySQL code (for this example should be named data-proxy.php):
PHP Code:
<?php
/**
* Basic PHP code to retrieve data in the format that the EXT JS Livegrid expects.
*
* Modified by Jim Nickel <jim@yournickelsworth.com>
* Original code was by Thorsten Suckow-Homberg <ts@siteartwork.de>
*
* Change the user, password and database as appropriate for your environment
*
*/
// +----------------------------------------------------------------------------
// | Connection settings. Adjust the following lines (see "livegrid.sql").
// +----------------------------------------------------------------------------
$host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$table = 'livegrid';
// +----------------------------------------------------------------------------
// | Query stuff. As long as everything works fine, you can ignore the following
// | lines. Scroll down to the part where the json encoding happens...
// +----------------------------------------------------------------------------
$conn = mysql_connect($host, $user, $password);
mysql_select_db($database, $conn);
$sql2 = "SELECT COUNT(id) AS count_id FROM $table";
$res2 = mysql_query($sql2);
$row2 = mysql_fetch_assoc($res2);
$length = $row2['count_id'];
$feeds = array();
$sql = "SELECT * FROM $table ORDER BY ".$_POST['sort']." ".$_POST['dir'].
" LIMIT ".$_POST['start'].",".$_POST['limit'];
$res = mysql_query($sql);
while (($row = mysql_fetch_assoc($res))) {
$feeds['data'][] = array(
'id' => $row['id'],
'number_field' => $row['number_field'],
'string_field' => $row['string_field'],
'date_field' => $row['date_field']
);
}
if (!isset($feeds['data'])) {
$feeds['data'] = array();
}
$feeds['version'] = 1;
$feeds['totalCount'] = $length;
// +----------------------------------------------------------------------------
// | You need to json_encode the array. If your PHP installation does not support
// | json_encode, go and get the Zend Framework at http://framework.zend.com,
// | which provides userland json encoding/decoding logic.
// +----------------------------------------------------------------------------
if (function_exists('json_encode')) {
$json = json_encode($feeds);
} else {
require_once 'Zend/Json.php';
$json = Zend_Json::encode($feeds);
}
echo $json;
?>
Here is the HTML (you need to modify the locations of the css and js files - also I found that it DID NOT WORK with 3.3 of EXT JS):
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ext.ux.Livegrid » Simple Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../build/resources/css/ext-ux-livegrid.css" />
</head>
<body>
<div id="content_1" style="margin:100px"></div>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="livegrid-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var myView = new Ext.ux.grid.livegrid.GridView({
nearLimit : 100,
loadMask : {
msg : 'Buffering. Please wait...'
}
});
var livegrid = new Ext.ux.grid.livegrid.GridPanel({
enableDragDrop : false,
cm : new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header : '#', width: 60 }),
{header: "Number", align : 'left', width: 160, sortable: true, dataIndex: 'number_field'},
{header: "String", align : 'left', width: 160, sortable: true, dataIndex: 'string_field'},
{header: "Date", align : 'right', width: 160, sortable: true, dataIndex: 'date_field'}
]),
loadMask : {
msg : 'Loading...'
},
title : 'Large table',
height : 400,
stripeRows : true,
width : 600,
store : new Ext.ux.grid.livegrid.Store({
autoLoad : true,
url : 'data-proxy.php',
bufferSize : 300,
reader : new Ext.ux.grid.livegrid.JsonReader({
root : 'data',
versionProperty : 'version',
totalProperty : 'totalCount',
id : 'id'
}, [ {
name : 'number_field', sortType : 'int'
},{
name : 'string_field', sortType : 'string'
},{
name : 'date_field', sortType : 'int'
}]),
sortInfo : {field: 'number_field', direction: 'ASC'}
}),
selModel : new Ext.ux.grid.livegrid.RowSelectionModel(),
view : myView,
bbar : new Ext.ux.grid.livegrid.Toolbar({
view : myView,
displayInfo : true
})
});
livegrid.render('content_1');
});
</script>
</body>
</html>
Then, you just need to create a MySQL table called livegrid that has this structure:
PHP Code:
CREATE TABLE IF NOT EXISTS `livegrid` (
`id` int(10) unsigned NOT NULL auto_increment,
`number_field` int(10) unsigned NOT NULL,
`string_field` varchar(255) NOT NULL,
`date_field` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5001 ;
Then fill it with some data:
PHP Code:
INSERT INTO `livegrid` (`id`, `number_field`, `string_field`, `date_field`) VALUES
(1, 0, 'A', '1972-05-20 22:49:03'),
(2, 1, 'B', '2007-07-29 00:01:55'),
(3, 2, 'C', '1971-07-01 00:46:13'),
(4, 3, 'D', '1978-01-15 12:07:04'),
(5, 4, 'E', '1976-04-12 21:11:17'),
(6, 5, 'F', '1970-10-27 04:16:47'),
(7, 6, 'G', '1999-08-10 12:03:48'),
(8, 7, 'H', '1987-07-16 03:48:15'),
(9, 8, 'I', '1991-08-21 17:42:46');
And you should be good to go!
Jim
To get LiveGrid working with Ext 3.3
Reply With Quote