Click here to Skip to main content
14,088,109 members
Click here to Skip to main content
Add your own
alternative version


17 bookmarked
Posted 23 Jul 2008
Licenced CPOL

Dynamic Bound DataGrid with ExtJS

, 23 Jul 2008
Rate this:
Please Sign up or sign in to vote.
Changing Datagrid bound data on the fly


ExtJS is a really cool library generating fancy looking GUI apps in JavaScript. I started using ExtJS for a bunch of database frontends and found that I needed to have a DataGrid that would change its contents based on an AJAX call that filtered data based on some search parameters.

Notionally, this was easy enough and it appeared there may be many ways to make this happen. As it turns out, there is one right way and many - seemingly plausible - options that don't work.

After extracting this functionality from a few postings that were doing far more impressive things and trawling through the documentation, I figured it might be helpful to post a bare-bones example of this functionality to make it easy for the next ExtJS newbie who finds her/himself wanting to do the same thing.

Using the Code

The JavaScript/ExtJS portion looks like this:


    var proxy = new{
        url: '',
    method: 'post'

    var dstore = new{
    url: '',
    proxy: proxy,
    fields: ['id', 'data'],
    totalProperty: 'totalCount',
    root: 'matches'

    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',
        width: 500,
        title:'Demo Data'

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


The backend datasource (which happens to be from PHP) looks like this:

$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


The HTML file (that really is just the standard stuff) is included in the ZIP file.

Points of Interest

MySQL/PHP Backend Data Source

For those looking to load database data (probably MySQL for PHP folk) into an ExtJS JSONStore, the PHP file supplies most of what you need to know. Basically you want an array of data that you then encode with json_encode(...). For MySQL, building the data would look a bit like:

$data = Array(); 
$qry = mysql_query("SELECT id, description FROM ...");
while ($vals = mysql_fetch_array($qry)) {
  $data[] = Array('id' => $vals['id'], 'description' => $vals['description'];
echo  json_encode($data); 

Paging Control on DataGrid

If you are using a paging control on the grid, then you will want the parameters that are sent to the DataStore to persist between calls (i.e. for when they press the paging buttons to retrieve the next page of data). To do this, you need to set the baseParams property on the datastore rather than sending parameters via the params object of the load(...) call. A real world example is shown below:

function search_submit() {
  dstore.baseParams = {
      number: document.getElementById('number').value,
      title: document.getElementById('title').value,
      keywords: document.getElementById('keywords').value,
      typeid: document.getElementById('typeid').value,
      allversions: (document.getElementById('allversions').checked) ? 1 : 0,
    params:  {
      start: 0,
      limit: 25


  • 23-Jul-2008 - PJC - First posted


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Paul Coldrey
Architect Lumient Pty Ltd
Australia Australia
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 1 Pin
joby.panengadan16-Jan-12 0:47
memberjoby.panengadan16-Jan-12 0:47 
GeneralRe: My vote of 1 Pin
Paul Coldrey28-Oct-15 19:42
groupPaul Coldrey28-Oct-15 19:42 
QuestionNot working in Ext 4 Pin
Jerinaw2-Dec-11 10:10
memberJerinaw2-Dec-11 10:10 
Questiondata problem in extjs4 Pin
KeesL21-Jun-11 22:19
memberKeesL21-Jun-11 22:19 
QuestionGreat Article, but I get an error in IE8 Pin
shalmali15-Jul-10 14:46
membershalmali15-Jul-10 14:46 
AnswerRe: Great Article, but I get an error in IE8 Pin
Paul Coldrey15-Jul-10 16:17
groupPaul Coldrey15-Jul-10 16:17 
QuestionGetting error in dstore.load(); Pin
gskankar9-May-10 23:34
membergskankar9-May-10 23:34 
AnswerRe: Getting error in dstore.load(); Pin
Paul Coldrey10-May-10 1:27
groupPaul Coldrey10-May-10 1:27 
GeneralRe: Getting error in dstore.load(); Pin
gskankar10-May-10 2:49
membergskankar10-May-10 2:49 
GeneralRe: Getting error in dstore.load(); Pin
gskankar10-May-10 3:09
membergskankar10-May-10 3:09 
GeneralRe: Getting error in dstore.load(); Pin
Paul Coldrey10-May-10 13:26
groupPaul Coldrey10-May-10 13:26 
GeneralRe: Getting error in dstore.load(); Pin
gskankar10-May-10 19:04
membergskankar10-May-10 19:04 
GeneralRe: Getting error in dstore.load(); Pin
gskankar11-May-10 2:30
membergskankar11-May-10 2:30 
GeneralRe: Getting error in dstore.load(); Pin
Paul Coldrey11-May-10 2:36
groupPaul Coldrey11-May-10 2:36 
GeneralRe: Getting error in dstore.load(); Pin
gskankar11-May-10 2:55
membergskankar11-May-10 2:55 
GeneralRe: Getting error in dstore.load(); Pin
Paul Coldrey11-May-10 13:49
groupPaul Coldrey11-May-10 13:49 
QuestionUsing button to add new tab in Ext Pin
goremo16-Apr-10 9:43
membergoremo16-Apr-10 9:43 
Generalnice article Pin
Ahsan Murshed26-Feb-10 5:10
memberAhsan Murshed26-Feb-10 5:10 
Generalmysql no closed parenthesis Pin
fonder10-Nov-09 13:26
memberfonder10-Nov-09 13:26 
GeneralRe: mysql no closed parenthesis Pin
Paul Coldrey10-Nov-09 15:48
groupPaul Coldrey10-Nov-09 15:48 
Question2 yuigrid with 2 datasource in the same page doesn't work ! Pin
David Zenou11-Jun-09 13:59
memberDavid Zenou11-Jun-09 13:59 
AnswerRe: 2 yuigrid with 2 datasource in the same page doesn't work ! Pin
Paul Coldrey11-Jun-09 14:19
groupPaul Coldrey11-Jun-09 14:19 
QuestionExtJs Grid Pin
ratikantasahoo8-Jun-09 21:30
memberratikantasahoo8-Jun-09 21:30 
AnswerRe: ExtJs Grid Pin
Paul Coldrey11-Jun-09 14:23
groupPaul Coldrey11-Jun-09 14:23 
GeneralGreat Article Pin
humexlakex21-Jan-09 17:48
memberhumexlakex21-Jan-09 17:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190518.1 | Last Updated 23 Jul 2008
Article Copyright 2008 by Paul Coldrey
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid