Extjs Datagrid

ExtJS is a cool library generating fancy looking GUI apps in JavaScript. It is easy to make  this by adding this code

Here is The JavaScript/ExtJS portion:

Ext.onReady(function(){
    Ext.QuickTips.init();

    var proxy = new Ext.data.HttpProxy({
        url: 'demo.data.php',
    method: 'post'
    });

    var dstore = new Ext.data.JsonStore({
    url: 'demo.data.php',
    proxy: proxy,
    fields: ['id', 'data'],
    totalProperty: 'totalCount',
    root: 'matches'
    });
    dstore.load();

    var grid = new Ext.grid.GridPanel({
    store: dstore,
        columns: [
        {id:'id', header: "Id", width: 60,  sortable: true, dataIndex: 'id'},
        {id: 'data', header: "Data", width: 200, sortable: true, dataIndex: 'data'}
        ],
        stripeRows: true,
        autoExpandColumn: 'data',
        height:350,
        width: 500,
        title:'Demo Data'
    });

    var search = new Ext.FormPanel({
        labelWidth: 150,
        frame:true,
        title: 'Search Demo Data',
        bodyStyle:'padding:5px 5px 0',
        width: 500,
        defaults: {width: 230},
        defaultType: 'textfield',
        items:
    [{
            fieldLabel: 'Search regular expression',
            name: 'pattern',
        id: 'pattern'
    }],
    buttons: [{
            text: 'Search',
        handler: function() {
        dstore.load({
            params: {
            pattern: document.getElementById('pattern').value
            }});
        
        }
        }]
    });

    search.render('search_form');
    grid.render('search_results');
});

The backend datasource:
<?php
$items = Array(Array('id'=>1, 'data' => 'the first item'),
           Array('id'=>2, 'data' => 'the second item'),
           Array('id'=>3, 'data' => 'one fish'),
           Array('id'=>4, 'data' => 'two fish'),
           Array('id'=>5, 'data' => 'red fish'),
           Array('id'=>6, 'data' => 'blue fish')
           );

$matches = Array();

if(!isset($_REQUEST['pattern']) || $_REQUEST['pattern'] == '') {
  $matches = $items;
} else {
  foreach ($items as $item) {
    if (eregi($_REQUEST['pattern'], $item['data'])) {
      $matches[] = $item;
    }
  }
}

echo json_encode(Array('totalCount' => count($matches),
             'matches' => $matches
             )
           );

?>