In this Tutorial will dicuss how to use the Grid panel properties store the data using Json Store.
Step 1: Create a database for our tutorial name it fish. then, create now the table and name it tuna.
CREATE TABLE IF NOT EXISTS `tuna` (
`id` tinyint(4) NOT NULL auto_increment,
`name` varchar(25) NOT NULL,
`position` varchar(25) NOT NULL,
`ambition` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
INSERT INTO `tuna` (`id`, `name`, `position`, `ambition`) VALUES
(1, 'Monkey D Luffy', 'Captain', 'I Will become the pirate king'),
(2, 'Roronoa zoro', 'Swordman', 'Become greatet swordman'),
(3, 'Sanji', 'Cook', 'Find all blue'),
(4, 'Nami', 'Navigator', 'Draw map of the world'),
(5, 'Usopp', 'Sniper', 'Become greatest warrior');
Step 2: Create the index.php this will display the form panel. dont forget to download the javascript famework.
extjs >
http://www.sencha.com/products/js/download.php
<html>
<head>
<title>DB GRID SAMPLE</title>
<!-- include ext-all.css -->
<link rel="stylesheet" href="ext-3.3/resources/css/ext-all.css" />
<!-- include ext-base.js -->
<script type="text/javascript" src="ext-3.3/adapter/ext/ext-base.js"></script>
<!-- include ext-all.js -->
<script type="text/javascript" src="ext-3.3/ext-all.js"></script>
<!-- include db-grid.js -->
<script type="text/javascript" src="db-grid.js"></script>
</head>
<body>
<!-- grid will render to this element -->
<div id="db-grid"></div>
</body>
</html>
Step 3: Now we will build the db-grid.js this will generate the grid panel.
Ext.onReady(function(){
// create the data store
var store = new Ext.data.JsonStore({
url: 'data.php',
fields: [
{name: 'id', type: 'int'},
'name', 'position', 'ambition'
]
});
// load data
store.load();
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'id',header: "ID", width: 30, sortable: true, dataIndex: 'id'},
{header: 'Name', width: 100, sortable: true, dataIndex: 'name'},
{header: 'Position', width: 100, sortable: true, dataIndex: 'position'},
{header: 'Ambition', width: 250, sortable: true, dataIndex: 'ambition'}
],
stripeRows: true,
height:250,
width:500,
title:'DB Grid',
// add a delete button on a grid toolbar
tbar : ['->', {
text: 'Delete',
icon: 'b_drop.png',
handler: function() {
var selected_rows = grid.getSelectionModel().getSelections();
if(selected_rows.length > 0) {
// make all id from data selected become 1,2,3,4,5,.....
var id = '';
var i = 0;
for(i=0; i<selected_rows.length; i++) {
id += selected_rows[i].get('id');
if(i < (selected_rows.length - 1)) {
id += ',';
}
}
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to delete the data?', function (btn, text) {
if (btn=='yes') {
Ext.MessageBox.show({
msg: 'Info..',
progressText: 'Deleting...',
width:300,
wait:true,
waitConfig: {interval:200}
});
Ext.Ajax.request({
url : 'delete.php' ,
params : {
id: id
},
method: 'POST',
success: function ( result, request ) {
// hide the progress window
Ext.MessageBox.hide();
// reload grid
grid.getStore().reload();
}
});
}
});
} else {
Ext.MessageBox.alert('Info', 'No row(s) selected. Select row(s) you want to delete first.');
}
}
}]
});
grid.render('db-grid');
});
Step 4: The Json data store. the Json store will responsible for communicating to the database because were using javascript. this is one of many data store in the extjs framework.
var store = new Ext.data.JsonStore({
url: 'data.php',
fields: [
{name: 'id', type: 'int'},
'name', 'position', 'ambition'
]
});
build now data.php where the sql query takes place.
<?php
$conn = mysql_connect("localhost", "root", "root") or die (mysql_error ());
$db = mysql_select_db ("fish") or die (mysql_error ());
$result=mysql_query ("SELECT * FROM tuna") or die (mysql_error ());
$data = array();
while ($row=mysql_fetch_object($result))
{
$data [] = $row;
}
echo json_encode($data);
?>
Step 5: Delete selected data. when doing a process it is good to use Ajax Request.
Ext.Ajax.request({
url : 'delete.php' ,
params : {
id: id
},
method: 'POST',
success: function ( result, request ) {
// hide the progress window
Ext.MessageBox.hide();
// reload grid
grid.getStore().reload();
}
});
}
delete.php
<?php
mysql_connect("localhost", "root", "root");
mysql_select_db("fish");
$sql = "
DELETE FROM tuna WHERE id in (". $_POST['id'] .")
";
mysql_query($sql);
?>
Download Source:
SOURCE
