K....I replaced my ext-base.js and ext-all-debug.js with the versions found here: http://www.ext-livegrid.com/ext/extjs/ext-3.1.0/ext-all-debug.js and now it all works. Must be something different with the version of EXT JS I downloaded.
Printable View
K....I replaced my ext-base.js and ext-all-debug.js with the versions found here: http://www.ext-livegrid.com/ext/extjs/ext-3.1.0/ext-all-debug.js and now it all works. Must be something different with the version of EXT JS I downloaded.
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):
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):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;
?>
Then, you just need to create a MySQL table called livegrid that has this structure: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 fill it with some data: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 ;
And you should be good to go!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');
Jim
Has anyone gotten this to work with either the FilterRow or the GridHeaderFilters?
Basically a search/filter that is in the columns or headers of the grid itself.
Any help would be appreciated!
Jim
THX for your sharing!
I got livegrid to work with 3.3 and Filterrow wit 3.3 also but still need to combine the two
http://www.sencha.com/forum/showthre...grid.FilterRow
http://www.sencha.com/forum/showthre...637#post527637
Peter
there is possible have left column blocked, like Excel?
Hi, I am trying to use live-grid to present data with 5000 rows and 100 cols.
My project is using EXT JS 2.0.2.
When I set the store's buffer size as 300, the live-grid works pretty well.
However, when I set it as 5000, the page is about to hang.
I wonder if the page is trying to render all the 5000 rows at the beginning..
since when I tried to scroll down, there was no "Loading/ Buffering" message prompted.
As I dun want the grid keeps connecting to the database,
is it possible to load all data once to the Ext.ux.grid.livegrid.Store,
and then make the grid to render and show only those data within the grid's viewable area?
I tried to change the BufferSize property in GridPanel/ GridView and also the Store's one, but didn't work.
Could anyone helps?
Thanks a lot.
There's been many different versions of a LiveGrid patch but none of them worked for me. It was a headache tracing this down through the stack. I went back to the previous version of ExtJs (3.2) and 3.3, compared the two and realized that LiveGrid is broken because in (Ext.grid.GridView) renderUI has changed (there's afterRenderUI now). renderUI now returns the HTML for GridView and afterRenderUI builds the DOM. After the patch below I haven't found anything else that is broken in LiveGrid (yet!).
Add this override code to your base JS object (or stuff the code between a script tag after loading the extjs and livegrid library files):
I hope this works for you.Code:Ext.override(Ext.ux.grid.livegrid.GridView, {
afterRenderUI : function()
{
var g = this.grid;
var dEnabled = g.enableDragDrop || g.enableDrag;
g.enableDragDrop = false;
g.enableDrag = false;
this._gridViewSuperclass.afterRenderUI.call(this);
var g = this.grid;
g.enableDragDrop = dEnabled;
g.enableDrag = dEnabled;
if(dEnabled){
this.dragZone = new Ext.ux.grid.livegrid.DragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}
if (this.loadMask) {
this._loadMaskAnchor = Ext.get(this.mainBody.dom.parentNode.parentNode);
Ext.apply(this.loadMask,{
msgCls : 'x-mask-loading'
});
this._loadMaskAnchor.mask(
this.loadMask.msg, this.loadMask.msgCls
);
var dom = this._loadMaskAnchor.dom;
var data = Ext.Element.data;
data(dom, 'mask').addClass('ext-ux-livegrid');
data(dom, 'mask').setDisplayed(false);
data(dom, 'maskMsg').setDisplayed(false);
}
},
renderUI : function()
{
return this._gridViewSuperclass.renderUI.call(this);
}
});
Works!
Thank you KarlSnyder0
I use a live grid.
Now I would that the grid load not from start = 0 but from start = 100 so I have setted this in my option's store:
But I get that the store starts always from 0.PHP Code:store.load({params:start:100 ..... }..... );
What must I do to have that the store load 100 and not from 0?
Many Thanks