Among many very important and useful plug-ins for ExtJS grid is RowExpander plug-in. It is particularly useful in the scenario where you have more date to show in grid but less space available on screen. In this case you can go for grid’s rowexpander plug-in.
RowExpander is functionality where if user wants he can click/double-click on any row to see more data on grid. The additional data will be shown on below the row after it gets expanded. When user double-clicks on row, expandrow event get fired on Grid’s view. Following code snippet shows the configuration of RowExpander plugin in grid.
|
1
2
3
4
5
6
7
8
9
10
11
|
plugins: [{
ptype: ‘rowexpander’,
rowBodyTpl : [
‘
‘,
‘
‘
Publisher: {publisher} ‘Release Date: {releaseDate}
‘, ‘Summary: {desc}
‘ , ‘
‘ ]
}]
|
As per the above code snippet, user will be shown book details along with books image when user double-clicks on any row on grid.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
Ext.onReady(function () {
Ext.define(‘TechZoo.view.Grid’, {
extend : ‘Ext.grid.Panel’,
title : ‘Grid with rowexpander plugin’,
onRowExpand : function(rowNode, record, expandRow) {
//handle the row expand event here…
},
plugins: [{
ptype: ‘rowexpander’,
rowBodyTpl : [
‘
‘,
‘
‘
Publisher: {publisher} ‘Release Date: {releaseDate}
‘, ‘Summary: {desc}
‘ , ‘
‘ ]
}],
listeners : {
afterrender: function(me) {
me.getView().on(‘expandbody’, me.onRowExpand);
}
},
columns: [
{text: “Title”, flex: 1, dataIndex: ‘title’},
{text: “Price”, renderer: Ext.util.Format.usMoney, dataIndex: ‘price’},
{text: “Category”, dataIndex: ‘category’},
{text: “Author”, dataIndex: ‘author’},
{text: “Language”, dataIndex: ‘language’}
],
store: Ext.create(‘Ext.data.ArrayStore’, {
fields: [
{name: ‘title’},
{name: ‘price’, type: ‘float’},
{name: ‘category’},
{name: ‘author’},
{name: ‘language’},
{name: ‘releaseDate’, type: ‘date’, dateFormat: ‘n/j h:ia’},
{name: ‘publisher’},
{name: ‘desc’},
{name: ‘thumbnail’}
],
data: [
[‘TROUBLE WITH MAGIC’,7.72,‘Non-Fiction’,‘Asha Nehemiah’,‘English’, ‘9/1 12:00am’, ‘Duckbill’, ‘Veena is full of bright ideas. She gets Aunt Malu to use her magic to make something new and wonderful. But magic has its own rules, and soon Veena and her aunt are in big trouble!’, ‘book_imgs/img01.jpg’],
[‘Phiss Phuss Boom’,5.2,‘Fiction’,‘Sayoni Basu’,‘English’, ’11/4 12:00am’, ‘Duckbill’, ‘It is very funny to think of a book of three short stories centred on farts. But that is exactly what Phiss Phuss Boom is about. Farts and stories centred on them. Anushka Ravishankar, Sayoni Basu and Jerry Pinto come together to tell children funny and sweet tales about what happens when you fart.’, ‘book_imgs/img02.jpg’],
[‘Half Girlfriend’,9.10,‘Romance’,‘Chetan Bhagat’,‘English’, ‘4/1 12:00am’, ‘Rupa Publication’, ‘Half Girlfriend is the much-awaited novel by the famous Indian novelist, Chetan Bhagat. It delves into new and different dimensions that relationships have in todays world’, ‘book_imgs/img03.jpg’],
]
}),
width : 550,
height: 300
});
Ext.create(‘TechZoo.view.Grid’, {renderTo: ‘output’});
});
|
Output:
I hope you enjoy the post. Happy coding 🙂
Source techzoo.org
