Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
ExtJS 2.3 Grouping Grid
<style type="text/css">
.btnExpand { background-position: 3px 1px !important; }
.btnCollapse { background-position: 3px -49px !important; }
</style>
<div id="grid"></div>
<script type="text/javascript">
Ext.onReady(function() {
var btnExpand = false;
//Data Store
var gridData = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'groupingGrid_data.xml'
}),
reader: new Ext.data.XmlReader({
record: 'cat'
},
[
{name:'index'},
{name:'group'},
{name:'breed'},
{name:'origin'},
{name:'notes'},
{name:'link'}
]
),
sortInfo: { //Required for Grouping
field: 'index',
direction: "ASC"
},
groupField: 'index',
groupOnSort:false
});
//Column Model
var gridColumns = new Ext.grid.ColumnModel([
{header: 'Group',
sortable: true,
dataIndex: 'index', //Using index mapping rather than group for manual initial sort. Names corrected via the renderer.
hidden: true,
renderer: renderGroup
},
{header: 'Breed',
width: 14,
sortable: true,
dataIndex: 'breed',
renderer: renderBreed
},
{header: 'Origin',
width: 33,
sortable: false,
dataIndex: 'origin'
},
{header: 'Notes',
width: 53,
sortable: false,
dataIndex: 'notes'
}
]);
//Grouping View
var gridGroups = new Ext.grid.GroupingView({
forceFit:true,
// groupTextTpl: '{text}',
groupTextTpl: '{[ values.rs[0].data["group"] ]}',
startCollapsed: false
});
//Group Renderer
function renderGroup(value, p, r){
return r.get('group');
}
//Breed and URL Renderer
function renderBreed(value, p, r){
//If directory links are needed, check if( ! r.data['phone'] ) to catch if it is a mailer alias
if (r.data['link']){
return String.format("<a href='{0}'>{1}</a>", r.data['link'], value);
} else { return value; }
}
//Build the Grid
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
title:"Selection of Cat Breeds",
width:1000,
height:500,
frame: true,
store: gridData,
colModel: gridColumns,
view: gridGroups,
loadMask: true,
tbar: [{
xtype: 'tbspacer'
},{
xtype: 'combo',
fieldLabel: 'Group',
hiddenName: 'group',
id: 'groupEntry',
emptyText:'group',
width: 190,
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
// listWidth: 330,
store: [
['All','All Groups'],
['Long Hair','Long Hair'],
['Semi-Long Hair','Semi-Long Hair'],
['Short Hair','Short Hair']
],
displayField: 'display',
valueField: 'value',
selectOnFocus:true,
mode: 'local',
listeners: {
'select':function() {
gridData.filterBy(dataFilter);
gridGroups.expandAllGroups();
}
}
},{
xtype: 'tbspacer' },{
xtype: 'tbspacer' },{
xtype: 'tbspacer'
},{
xtype: 'textfield', //Filters the data store as you type in the textfield
id: 'filterEntry',
width: 180,
emptyText:'search...',
enableKeyEvents: true,
listeners: {
'keyup':function() {
gridData.filterBy(dataFilter);
gridGroups.expandAllGroups();
}
}
},{
xtype: 'tbspacer' },{
xtype: 'tbspacer' },{
xtype: 'tbspacer'
},{
xtype:'tbbutton',
text: 'Reset',
handler: function(){
//Clear all filters and reload the Data Store.
gridData.clearFilter();
Ext.getCmp('filterEntry').setValue('');
Ext.getCmp('groupEntry').setValue('');
}
},'->',{
xtype:'tbbutton',
text: 'Collapse All',
cls: 'x-btn-text-icon',
icon: '/ext-2.3.0/resources/images/default/grid/group-expand-sprite.gif',
iconCls: 'btnCollapse',
handler: function(){
//Toggle Expanding and Collapsing all groups
if ( btnExpand == true ){
btnExpand = false;
this.setText('Collapse All');
this.setIconClass('btnCollapse');
gridGroups.expandAllGroups();
} else if ( btnExpand == false ) {
btnExpand = true;
this.setText('Expand All');
this.setIconClass('btnExpand');
gridGroups.collapseAllGroups();
}
}
}]
});
//Filter the Grid Using All Parameters
function dataFilter(r){
//Set search values to lowercase to prevent case sensitivity
var param1 = Ext.get('filterEntry').getValue().toLowerCase();
var param2 = Ext.get('groupEntry').getValue().toLowerCase();
//Clear out dummy text to prevent false searches
if (param1 == 'search...'){ param1 = '' }
if ((param2 == 'group') || (param2 == 'all groups')){ param2 = '' }
//Set data values to lowercase to prevent case sensitivity
var value0 = r.get('group').toLowerCase();
var value1 = r.get('breed').toLowerCase();
var value2 = r.get('origin').toLowerCase();
var value3 = r.get('notes').toLowerCase();
//Search each data value for matches with the search values
if ((value0.search(param1) > -1) || (value1.search(param1) > -1) || (value2.search(param1) > -1) || (value3.search(param1) > -1)){ //keyword search
if ((value0 == param2) || (!param2)) { //group search
return true;
} else { return false; }
} else { return false; }
}
gridData.load();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment