使用 ExtJS 动态绑定数据网格

• 下载演示 - 1.51 KB

引言

ExtJS 是一个非常酷的库，用于使用 JavaScript 生成外观精美的 GUI 应用程序。我开始使用 ExtJS 开发许多数据库前端，并发现我需要一个 DataGrid，该网格会根据 AJAX 调用更改其内容，该调用会根据一些搜索参数过滤数据。

从理论上讲，这很容易实现，并且似乎有很多方法可以实现这一点。但实际上，只有一种正确的方法，而许多看似合理的方法却行不通。

在从一些正在做更令人印象深刻的事情的帖子中提取此功能并仔细阅读文档后，我认为发布一个此功能的精简示例会很有帮助，以便下一个 ExtJS 新手可以轻松地实现相同的功能。

Using the Code

JavaScript/ExtJS 部分如下所示

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');
});

后端数据源（恰好来自 PHP）如下所示

<?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
             )
           );

?> 

HTML 文件（实际上只是标准内容）包含在 ZIP 文件中。

关注点

MySQL/PHP 后端数据源

对于那些希望将数据库数据（可能对于 PHP 来说是 MySQL）加载到 ExtJS JSONStore 中的人，PHP 文件提供了您需要了解的大部分内容。基本上，您需要一个数据数组，然后使用 json_encode(...) 对其进行编码。对于 MySQL，构建数据可能如下所示

$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); 

DataGrid 上的分页控制

如果您正在使用网格上的分页控制，那么您希望发送到 DataStore 的参数在调用之间保持不变（即，当他们按下分页按钮以检索下一页数据时）。为此，您需要在 datastore 上设置 baseParams 属性，而不是通过 load(...) 调用中的 params 对象发送参数。下面显示了一个实际示例

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,
    };
  dstore.load({
    params:  {
      start: 0,
      limit: 25
    }
  });
} 

历史记录

• 2008-07-23 - PJC - 首次发布