This tutorial is a continuation from the first tutorial, so before you read this tutorial I suggest you read the previous tutorial section of the grid: grid extjs tutorial form: paging grid, because the data I use here is the data from the previous grid tutorials

Tutorial ini akan membahas tentang bagaimana caranya membuat Expanded Row, Collapse, dan menambahkannya icon pada Grid. Berikut snaphsot dari tutorial ini:

What is the use Expanded Row? I think it can be used to place additional information, and can also be used to save space page, collapse itself can be used for animation slider.

Here are some of the files needed in this tutorial

1. file index.php

<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="http:ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http:ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="RowExpander.js"></script>
<script type="text/javascript" src="g_jadi.js"></script>
<style type="text/css">
.icon-grid {
background-image:url(./grid.png) !important;
<body bgcolor="#FFFFFF">
<div style="height:180px"></div>
<table align="center">
<div id="form"></div>

source code that color is red is an additional source code in this tutorial.

2. g_jadi.js

var NiagaDataStore;
var NiagaColumnModel;
var NiagaListingEditorGrid;


var expander = new Ext.grid.RowExpander({ //compenen dari expander row
tpl : new Ext.Template(
//dibawah ini adalah field yang ingin diexpand
' '<p><b>Nama:</b> {nama}</p><br>',
'<p><b>Alamt:</b> {alamat}</p><br>',
'<p><b>Tanngal Laporan:</b> {tgl_Laporan}</p><br>'

NiagaDataStore = new{
proxy: new{
url: 'grid.php',
method: 'POST'
reader: new{
root: 'results',
totalProperty: 'total'


{name: 'id', type: 'int'},
{name: 'nama', type: 'string'},
{name: 'alamat', type: 'string'},
{name: 'tgl_Laporan', type: 'string'}

sortInfo:{field: 'id', direction: "ASC"}


//tampilan awal
NiagaColumnModel = new Ext.grid.ColumnModel(
expander, //memanggil componen expander
header: 'Id',
readOnly: true,
dataIndex: 'id',
width: 40,
hidden: false

header: 'Nama',
dataIndex: 'nama',
width: 130,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
header: 'Alamat',
dataIndex: 'alamat',
width: 160,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
header: 'Tanggal Laporan',
dataIndex: 'tgl_Laporan',
width: 120,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
hidden: false
NiagaColumnModel.defaultSortable= true;

//tampilan luar
NiagaListingEditorGrid = new Ext.grid.GridPanel({
title: 'Grid Expand',
store: NiagaDataStore,
cm: NiagaColumnModel,
viewConfig: {
plugins: expander,
collapsible: true,//manggil fungsi collaps
animCollapse: true,//memberikan animasi pada collaps
iconCls: 'icon-grid',//menambahkan icon pada grid

bbar: new Ext.PagingToolbar({
pageSize: 5,
store: NiagaDataStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"




source code that color is is the core of this tutorial.

3. RowExpander.js

kamu bisa mendownload source code lengkapnya disini

Title: Tutorial Form Grid Extjs : Expanded Row, Collapse, dan Icon Grid
Posted by faisal

Thanks for reading about Tutorial Form Grid Extjs : Expanded Row, Collapse, dan Icon Grid