EXTJS: Getting each row value from the grid

May 14th, 2010 by aditia rahman / 12 Comments  

     

When I write this post, a friend of mine asking me how to get the value from all the row in EXTJS grid, she use EditorGridPanel to make the grid editable by it’s user, and submit all edited value in each row to the server  i’m using php to take all the server side process). Actually the idea is very simple, the grid need to have sm config options it is a shorthand for selModel and this config that make the grid can be selected per row, and you can added the checkboxselection model to choose the row that you desired, so trid to make it simple tutorial, and at the of the post you can download the source from this post.

1. Setting the main page
Include the EXTJS file (javascript and css) in html header file, then create single div with an id to where the grid to put on, and i’m using inline css style to centering the div the on the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"; ?>"></script>
<script type="text/javascript" src="extjs/ext-all.js"; ?>"></script>
</head>

/* This should be fill with the EXTJS script code
 * It explain on the next step
 */

// on the body section
<body>
<div id="grid-example1" style="height: 200px;width:600px;margin:0 auto;padding:20px;"></div>
</body>
</html>

2. Create the data in array for store inside the grid
To make it simple I using data for grid from an array, for more expert use, maybe using Json data reader will be fit

var myData = [
	[1, 'Luffy', 'Monkey D Luffy', 'monkeyd@luffy.com', 'East Blue'],
	[2, 'Zoro', 'Roronoa Zoro', 'roronoa@zoro.com', 'East Blue'],
	[3, 'Sanji', 'Leg Sanji', 'sanji@baratie.net', 'East Blue'],
	[4, 'Usop', 'Soge King', 'usap@sogevillage.com', 'East Blue'],
	[5, 'Franky', 'Franky Cyborg', 'franky@water7.com', 'East Blue'],
	[6, 'Chopper', 'Tony Chopper', 'chopper@drum.com', 'East Blue']
];

3. Create the data store for editable grid, in this case i’m using Form.ComboBox

// main store for grid
var store_mbti = new Ext.data.ArrayStore({
	fields: [
		{ name: 'id' }, { name: 'username' }, { name: 'full_name' },
		{ name: 'email' }, { name: 'village' }
	]
});

// store including the data for editable grid, using Form.ComboBox
var strVillage = new Ext.data.SimpleStore({
	fields: ['village'],
	data : [['Baratie'], ['Drum Island'],
		['Soge Island'],['Swordmen Land']]
});

4. Create the checkboxselectionmodel
This component have to be created and included in grid config options named sm, the selModel, this is to make the entire single row selectable

var cb_select = new Ext.grid.CheckboxSelectionModel();

5. Create the main grid component
If you want the grid to be manually selectable by the user you need to add cb_select in the grid column header

var grid_mbti = new Ext.grid.EditorGridPanel({
	store: store_mbti,  frame: true, border: true, autoHeight: true,
	resizable: true, loadMask: true, stripeRows: true,
	title:'Grid Select All', sm: cb_select,
	columns: [
		// cb_select, // uncomment, if using checkboxselectionmodel
		{ header: "Username", dataIndex: 'username', },
		{ header: "Full Name", dataIndex: 'full_name', width: 150 },
		{ header: "Email", dataIndex: 'email', width: 150 },
		{ header: "Village", dataIndex: 'village', width: 120,
			editor: new Ext.form.ComboBox({
				allowBlank: false,
				mode: 'local',
				store: strVillage,
				valueField: 'village',
				displayField: 'village',
				triggerAction: 'all',
				editable: false
			})
		}],
	tbar: [{
		text: 'Submit',
		handler: function() {
			// the implementation is in the next step
		}
	}]
});

6. Load the store and render the grid

store_mbti.loadData(myData);
grid_mbti.render('grid-example1');

The alternative way from using render grid is, to add config option on grid named renderTo and fill it with html id that you desire

7. Function handling on the toolbar, using ajax or not it’is up to you
Creating function handler should be in handler config in toolbar button, when I try my self it got some error on firebug

// this implementation is inside button handler on step 5
handler: function() {
	grid_mbti.getSelectionModel().selectAll();
	var sm = grid_mbti.getSelectionModel().getSelections();
	var temp = '';
	for (i=0; i<=sm.length-1; i++) {
		temp = temp + '|' + sm[i].get('village')
	}
	Ext.Ajax.request({
		url: 'process_data.php',
		method: 'POST',
		params: 'village=' + temp,
		success: function(obj) {
			var resp = obj.responseText;
			if (resp != 0) {
				Ext.MessageBox.alert('Success', resp + ' Processed');
			} else {
				Ext.MessageBox.alert('Failed', 'No Processed');
			}
		}
	});
}

8. Handling the server side process
Like the previous step, the php file I called is process_data.php, the php script convert the variable received to an array, and then you can loop through the array

<?php

$arr_village = explode('|', $_POST['village']);
$count = count($arr_village) - 1;
if ($count != 0) {
    foreach ($arr_village as $value) {
        // data process in here, manipulate db or whatever
    }
    echo $count;
} else {
    echo 0;
}

?>

The result screen should be like this, first before submit with the last one column editable

And after click the submit button on the top left of the grid toolbar, all the row in the grid should be selected

Yup that’s all, you can download all the code from the link below but once again i’m not included the EXTJS file, you just can download it by your self on the official site. In the downloaded code I provide 2 grid with different use of selection model so you can clearly see the different, and I welcome for any suggestion from you thanks.

DOWNLOAD SOURCE

        submit to reddit Delicious

Others You May Like

12 Comments Leave a Comment Subscribe RSS

Leave a Comment

You must be logged in to post a comment.