[英]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.