Google Web Seach With ExtJS Grid and PHP

January 24th, 2011 by aditia rahman / 3 Comments  


This time I want to make a simple example in displaying google web search result in ExtJS grid, other ExtJS component that can be used to displaying this result is dataview, but grid is more common in displaying data in ExtJS, to use google search API you have to signup to get an API key, one key is only for one domain.

Google API Key

If you want to know the detail about google search API, you can refer this link.

The ExtJS Code

The ExtJS code contains Windows, gridPanel, pagingToolbar, searchField

Ext.onReady(function() {
    var store = new{
        root: 'results',
        totalProperty: 'totalCount',
        remoteSort: true,

        fields: [

        proxy: new{
            url: 'search.php'

    function renderResult(value, p, record){
        return String.format(
            '<a class="link" href="{1}" target="_blank">{0}</a>',

    var grid = new Ext.grid.GridPanel({
        border: false,
        width: 485,
        height: 430,
        store: store,
        loadMask: true,
        columns: [{
            header: 'Results',
            dataIndex: 'title',
            width: 480,
            renderer: renderResult

        viewConfig: {
            getRowClass : function(record, rowIndex, p, store){
                p.body = '<p class="excerpt">''</p>';
        tbar: [
            new Ext.ux.form.SearchField({
                store: store,
                width: 200,
                emptyText: 'Google Search'
        bbar: new Ext.PagingToolbar({
            pageSize: 8,
            store: store,
            displayInfo: true

    var window = new Ext.Window({
        title: 'Google Web Search - ExtJS & PHP',
        width: 500,
        height: 460,
        closable: false,
        resizable: false,
        items: [grid]

The Search Field used is from the ExtJS ux you can found it on the example section, and it placed in the gridPanel toolbar, inside the GridPanel there is a viewConfig, I’m following this example, this is for displaying search result content (short description)

The PHP Code

The PHP code used to make me easier generating json format so ExtJS can be easily read all the data


$start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
$limit = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 8;

$q = str_replace(" ", "%20", $_REQUEST['query']);
$key = "insert your key";

$url = ''.$q.'&start='.$start.'&rsz='.$limit.'&key='.$key;

$content = file_get_contents($url);
$array = json_decode($content);

$data = array();

foreach ($array->responseData->results as $var => $value)
    $data[] = array(
        "GsearchResultClass" => $value->GsearchResultClass,
        "unescapedUrl"       => $value->unescapedUrl,
        "visibleUrl"         => $value->visibleUrl,
        "cacheUrl"           => $value->cacheUrl,
        "title"              => $value->title,
        "titleNoFormatting"  => $value->titleNoFormatting,
        "content"            => $value->content

$out = array(
    "success" => true,
    "totalCount" => $array->responseData->cursor->estimatedResultCount,
    "results" => $data

echo json_encode($out);

The CSS Code

This is the simple CSS code for customizing the grid row style

.link {
    color: #333;
    line-height: 25px;
    text-decoration: none;
    font-size: 13px;
    padding: 5px 10px;
    display: block;
    -webkit-border-radius: 1.0em;
    -moz-border-radius: 1.0em;
    border-radius: 1.0em;
.link:hover {
    background: #333;
    color: #f3f3f3;
.excerpt {
    padding: 5px 20px;
    color: #999;

Here is the result

Google Web Search With ExtJS & PHP

View Demo | Download Source
        submit to reddit Delicious

3 Comments Leave a Comment Subscribe RSS

Leave a Comment