Since 097 will be using extjs, I figured I’d better start working with it and learning how to do it. So I reworked a simple database view on a per-user basis that I had working with ordinary php and page-refresh methods.
It took me two days, not because it was so hard but because it took me two days to find the stray comma that was causing IE to totally fail to even load the grid.
In my template, I made a <div id="topic-grid"></div> container (I based this on a demo on the extjs site).
Here’s my js file:
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'assets/js/ext2/resources/images/default/s.gif';
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'assets/snippets/termbase/grid-paging-data.php'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'term',
fields: [
{name: 'tb_id', type: 'int'},
'german',
'english',
'italian',
'french'
]
}),
remoteSort: true
});
store.setDefaultSort('english', 'asc');
var cm = new Ext.grid.ColumnModel([{
header: "Id",
dataIndex: 'tb_id',
width: 65
},
{
header: "German",
dataIndex: 'german',
width: 225
},
{
header: "English",
dataIndex: 'english',
width: 225
},
{
header: "Italian",
dataIndex: 'italian',
width: 225
},
{
header: "French",
dataIndex: 'french',
width: 225
}
]);
cm.defaultSortable = true;
var grid = new Ext.grid.GridPanel({
el:'topic-grid',
width:985,
height:500,
title:'View Termbase',
store: store,
cm: cm,
trackMouseOver:false,
loadMask: true,
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
grid.render();
store.on('beforeload', function() {
store.baseParams = {
client:document.getElementById('clientName').innerHTML
};
});
store.load({params:{start:0, limit:25}});
});
And the php file to process it:
<?php
$link = mysql_pconnect("localhost", "database_user", "database_pass") or die("Could not connect");
mysql_select_db("database_name") or die("Could not select database");
$sql_count = "SELECT * FROM tb_termbase WHERE tb_user = '".$_POST['client']."'";
if(isset($_REQUEST['filter']) && $_REQUEST['filter'] != '') {
$sql_count .= "AND (english LIKE '%".$_REQUEST['filter']."%' OR german LIKE '%".$_REQUEST['filter']."%' OR french LIKE '%".$_REQUEST['filter']."%' OR italian LIKE '%".$_REQUEST['filter']."%')";
}
$sql = $sql_count . " ORDER BY ".$_POST['sort']." ".$_POST['dir']." LIMIT ".(integer)$_POST['start'].", ".(integer)$_POST['limit'];
$rs_count = mysql_query($sql_count);
$rows = mysql_num_rows($rs_count);
$rs = mysql_query($sql);
while($obj = mysql_fetch_object($rs))
{
$arr[] = $obj;
}
echo $_REQUEST['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';
?>
Of course, the ext libraries and my js file are linked into the head of my template.
This produces a very nice grid with sortable columns, filtered on the username of the logged-in user. I display the user’s name on the page next to a logout button, in a span with the id of "clientName", which is where the filter gets its data.
It also generates a very useful php error log file in the same folder as your php file.
The biggest gotcha is to be scrupulous about your commas in the parameter lists in the js file. One extra comma will make IE roll over and play dead. It’s hard to figure out though, because the rest of the browsers just soldier on anyway.
☆ A M B ☆
