Tutorial Form Grid Extjs : Expanded Row, Collapse, dan Icon Grid

Home » extjs tutorial » Tutorial Form Grid Extjs : Expanded Row, Collapse, dan Icon Grid

Tutorial Form Grid Extjs : Expanded Row, Collapse, dan Icon Grid

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

<html>
<head>
<title>Grid</title>
<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;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<div style="height:180px"></div>
<table align="center">
<tr>
<td>
<div id="form"></div>
</td>
</tr>
</table>
</body>
</html>

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

2. g_jadi.js

var NiagaDataStore;
var NiagaColumnModel;
var NiagaListingEditorGrid;

Ext.onReady(function(){
Ext.QuickTips.init();

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 Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'grid.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
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"}
});

NiagaDataStore.load({params:{start:0,limit:5}});

//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: {
forceFit:true
},
plugins: expander,
collapsible: true,//manggil fungsi collaps
animCollapse: true,//memberikan animasi pada collaps
iconCls: 'icon-grid',//menambahkan icon pada grid
width:455,
height:210,

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

});

NiagaListingEditorGrid.render('form');

});

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

Categories: extjs tutorial

+ comments + 5 comments

Anonymous

February 2, 2009 at 12:59 AM

kayaknya bagus tuh tutorialnya .... :)

tapi sayang, aku gk dong bahasa yg bgituan .... hehehe

umar bakri

December 2, 2009 at 9:10 PM

aku dah coba semua file yang ada kok ngak satupun yang bisa jalan ya ( ngak ada muncul apa -apa dilayar brousernya ) ... Gimana solusinya ya ?

mbahsomo

January 2, 2010 at 11:08 PM

numpang absen
Berkunjung juga ke blog saya http://sugik.do-event.com
@umar bakri coba cek dengan firebug atau dengan google chrome error nya apa ??? maaf bantu jawab