How to populate mysql db details using Extjs grid in php?
Question
First in php page I am getting mysql db details and display in console, but I need to populate db details in ExtJs grid. Can you help me how to write ExtJs grid with php and how to populate db details .
<?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>
1 answers
solution1
0 2013-10-15 14:23:38
You first need to create a store, I'd prefer a JsonStore, then you'd need to populate it using ajax. your code should be some what like this:
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();
after that you need to create the column model of the grid, this is the sample column model from one of my projects.
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}
]);
next you need to create a gridView and a 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,
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.