RowExpander plugin adds the ability to have a Column with a plus and minus sign in a grid which enables a second row body than can expands or contract. By default the Row will expand or collapse if
- selectRowOnExpand: clicked on the expander icon
- expandOnDblClick: double clicked on the Row
- expandOnEnter: Enter key is pressed on the selected Row
You can set each of the properties to true or false based on your requirement. In this example we are going to get our grid data from MySQL database using Java Servlet Ajax request. We will display some of the information on the grid row and then map the rest of the information on the Row body using the Grid plugin Ext.ux.RowExpander. Also we will add two buttons to the grid toolbar that will allow us to expand all or collapse all rows in the Grid.
Application starting point - index.html
<html>
<head>
<title>ExtJs 4 Grid Row Expander Example </title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="extjs/ux/css/CheckHeader.css">
<style type="text/css">
.x-grid-rowbody {
margin: 5px 0px 0px 10px;
}
</style>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Application JavaScript file - app.js
Ext.Loader.setPath('Ext.ux', 'extjs/ux');
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.ux.RowExpander'
]);
Ext.application({
name: 'MyApp',
appFolder: 'app',
controllers: [
'Countries'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{
xtype: 'countryList',
}
]
});
}
});
Model for the country data - Country.js
Ext.define('MyApp.model.Country', {
extend: 'Ext.data.Model',
fields: [
'code',
'name',
'continent',
'region',
'lifeExpectancy',
'gnp'
]
});
Store for the Grid data - Countries.js
Ext.define('MyApp.store.Countries', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Country',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'CountryServlet',
reader: {
type: 'json',
totalProperty: 'totalCount',
root: 'countries',
successProperty: 'success'
},
}
});
Grid view source code - CountryList.js
Ext.define('MyApp.view.CountryList' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.countryList',
title : 'List of Countries with Row Expander',
store : 'Countries',
loadMask: true,
height: 300,
width: 600,
margin: '10 0 0 10',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype : 'button',
text: 'Expand all Rows',
action: 'expand'
},
{
xtype: 'tbseparator'
},
{
xtype : 'button',
text: 'Collapse all Rows',
action: 'collapse'
},
]
}],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'<b>Continent:</b> {continent} <b>Region:</b> {region}'
]
}],
initComponent: function() {
this.columns = [
{header: 'Country Code', dataIndex: 'code', flex: 1},
{header: 'Name', dataIndex: 'name', flex: 2},
{header: 'Life Expectancy', dataIndex: 'lifeExpectancy', flex: 1},
{header: 'GNP', dataIndex: 'gnp', flex: 1}
];
this.callParent(arguments);
}
});
Application controller - Countries.js
Ext.define('MyApp.controller.Countries', {
extend : 'Ext.app.Controller',
//define the stores
stores : ['Countries'],
//define the models
models : ['Country'],
//define the views
views : ['CountryList'],
init : function() {
this.control({
'viewport > panel' : {
render : this.onPanelRendered
},
'countryList button[action=expand]' : {
click : this.onExpandAllRows
},
'countryList button[action=collapse]' : {
click : this.onCollapseAllRows
}
});
},
onPanelRendered : function() {
//just a console log to show when the panel si rendered
console.log('The panel was rendered');
},
onExpandAllRows : function(button) {
console.log('Now going to expand all Rows in this Grid');
var grid = button.up('panel');
var store = grid.getStore();
var expander = grid.plugins[0];
for(var i = 0; i < store.getCount(); i++) {
var record = store.getAt(i);
if(!expander.recordsExpanded[record.internalId]){
expander.toggleRow(i);
}
}
},
onCollapseAllRows : function(button) {
console.log('Now going to collapse all Rows in this Grid');
var grid = button.up('panel');
var store = grid.getStore();
var expander = grid.plugins[0];
for(var i = 0; i < store.getCount(); i++) {
var record = store.getAt(i);
if(expander.recordsExpanded[record.internalId]){
expander.toggleRow(i);
}
}
}
});
Eclipse Project Explorer view
Country Servlet Sample JSON data Response
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.