ExtJS 2.3 Grouping Grid

groupingGrid.html

<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>