ExtJS 2.3 Grouping Grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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