簡體   English   中英

如何在PHP中使用Extjs網格填充mysql數據庫詳細信息?

[英]How to populate mysql db details using Extjs grid in php?

首先在php頁面中,我正在獲取mysql數據庫詳細信息並顯示在控制台中,但是我需要在ExtJs網格中填充數據庫詳細信息。 您能幫我如何用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>

您首先需要創建一個商店,我希望使用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,

});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM