0

首先在 php 页面中，我获取 mysql db 详细信息并在控制台中显示，但我需要在 ExtJs 网格中填充 db 详细信息。你能帮我如何用 php 编写 ExtJs 网格以及如何填充数据库详细信息。

 <?php
  // Install the DB module using 'pear install DB'
  require_once( "db.php" );

  $data = array();

  $db =& DB::connect("mysql://root@localhost/praveen", array());
  if (PEAR::isError($db)) { die($db->getMessage()); }

$res = $db->query( "SELECT * FROM users " );


  ?>
  <html>
    <link rel="stylesheet" type="text/css" href ="http://localhost:8080/ext/ext-4.2.1.883/resources/css/ext-all.css"/>
    <script type = "text/javascript" src = "http://localhost:8080/ext/ext-4.2.1.883/ext-all-dev.js"/>

    <script type="text/javascript">
        Ext.onReady(function(){

            //how to get the populate db details in grid here !

        });
    </script>
  <body>
  <table>
  <tr>
  <th>First Name</th>
  <th>Middle Name</th>
  <th>Last Nmae</th>

  </tr>
  <?php while( $res->fetchInto( $row, 
            DB_FETCHMODE_ASSOC ) ) { ?>
  <tr>
  <td><?php echo( $row['firstname'] ); ?></td>
  <td><?php echo( $row['middlename'] ); ?></td>
  <td><?php echo( $row['lastname'] ); ?></td>

  </tr>
  <?php } ?>

  </table>

 </body>
  </html>
4

1 回答 1

0

您首先需要创建一个商店，我更喜欢 JsonStore，然后您需要使用 ajax 填充它。你的代码应该是这样的：

var store = new Ext.data.JsonStore(
{
proxy: new Ext.data.HttpProxy({url: 'url to your php script to fetch data from the DB',
method:'GET'}),
root:'root of the JSON string in which data resides.',
fields: ['list of fields'], 
});
store.load();

之后您需要创建网格的列模型，这是我的一个项目中的示例列模型。

var colModel = new    Ext.grid.ColumnModel([checkboxsel{header:'UserName',dataIndex:'USERNAME',sortable:true}
                                             {header:'Name',dataIndex:'NAME',sortable:true,editor:textFieldEditor},    {id:'DOB',header:'Date of Birth',dataIndex:'DATEOFBIRTH',sortable:true,editor:dateFieldEditor},
                                         {header: 'Password', dataIndex: 'PASSWORD',editor:passwordFieldEditor}
                                         ]);

接下来你需要创建一个gridView和一个GridPanel

var gridView = new Ext.grid.GridView();
var grid = new Ext.grid.EditorGridPanel
({
    title:'My First Grid',
    id:'myFirstGrid',
    renderTo: Ext.get('id of your html element in which you want the grid to be displayed'),
    autoHeight: true,
    store:store,
    ,
    width:600,
    loadMask:true,

    colModel:colModel,
    sm:checkboxsel,

});
于 2013-10-15T14:23:38.860 回答