Superdit.com » Javascript

EXTJS: Getting each row value from the grid

aditia rahman — Fri, 14 May 2010 02:44:12 +0000

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









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

// on the body section

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

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

Table sorting collection using prototype javascript

aditia rahman — Sun, 31 Jan 2010 01:28:30 +0000

In this post I want to show some solution to build sorting table using Prototype Javascript Framework, although the library is not really popular right now (maybe because of Jquery), the community is still live. Most of this script using default style, of course you can customize it.

4. Table Sorting With Prototype

Demo | Download

5. Lighweight Table Sorting

Download

6. MyTableGrid

Demo | Download

7. Sortable for Prototype

Demo

Simple Steps to Understanding ExtJS

aditia rahman — Fri, 21 Aug 2009 02:39:40 +0000

ExtJS is one of the most popular javascript user interface framework, it offer a bunch of great user interface component, if you are a Java Programmer it better you use the Ext-GWT, but if you are a web programmer who always using web scripting language such as PHP, it may be painless if you learn the new web interface beside the traditional HTML, but i did it and mix it with Codeigniter in purpose to create and maintain better PHP code, and it’s not really bad and here some advice I have for you :

1. Follow the examples

ExtJS come with a bunch of great sample use of using widget, this provide the basic use of the component, creating plugin, etc. This is the best way to know what you can do with the component and how to implement the component by viewing the source code, if you somehow don’t understand what the code means, simply you can consult the API documentation first. Just download it first and run on your local server or you can view it online.

2. Read the ExtJS tutorial

So, you are ready to get your hand wet ? but don’t know what to do to digging depper to understanding ExtJS, I suggest you start with tutorial from the ExtJS official site. It’s cover about the getting started guide, dom query helper, combobox, form, grids, drag & drop, menus, tree, etc, even the basic of the application design and some of them provide the downloadable example source code. Although the tutorial is useing version 1.x and 2.x, yes it is compatible if you are using version 3.

3. Don’t fear to read the API

The ExtJS API documentation come with the bundle when you’re downloading ExtJS. So how this gonna be useful ? well for me it provide very useful information about the Ext core and default config options, properties, events, method for each component, it’s a good reference when you are trying to manipulating the component. Some component given the basic example of usage. Just download the ExtJS bundle and you can find it in examples folder or you can view it online

4. Consult the spesific question to the forum

When I get some trouble I always use Google first, type your spesific question on Google and most of the solution found in the ExtJS official forum and i always found the solution is very handy and easy to understand. Even some of the expert member provide advance source about ExtJS like quick search plugin, grid paging row numberer and custom themes and you can download it for free.

5. Use the good IDE

Since you use ExtJS in javascript language, the you must code all the ExtJS component by hand, and you need the good IDE to help you browse the all avaliable API. I’m personally using Netbeans PHP IDE for my project, you can set the project and include the ExtJS style, ExtJS basic and ExtJS all. The IDE will scan all the project including the ExtJS file and when you code the ExtJS component or ExtJS core, you can type shift + space on your keyboard and the IDE will give an autocomplete feature, and it helping me a lot, maybe not all the method shown in the autocomplete feature but you still can browse on the API documentation. If your not the fan of Netbeans, you can use other great IDE like Eclipse or Aptana.

6. You may need to know a bit about Javascript Language

My experience is when i code the event handler of the component, sometimes need like client side validation, like is defined object, sel length etc. When you found this trouble just googling about spesific javascript question and it’is not really hard.

more ExtJS Resource and tutorial

Video tutorial from EXTJS.TV bunch of ExtJS Tutorial

http://defafe.com a blog about ExtJS tutorial

Example ExtJS in Action some of link not working but the ExtPlorer is good.

TuturTinular a blog who have some ExtJS tutorial

ExtJS and WordPress wordpress themes usign extjs and it’s free to download

Using ExtJS grid in WordPress Admin

Integrating CakePHP and ExtJS

http://blog.extjs.eu/