javascript with css

hi experts
I am using Ext-js 4.2 and i am trying to hide the group title row for my grouping (in grid).
This is my css

.x-grid-group-hd-collapsible .x-grid-group-title {    
    /*visibility: hidden;*/

This works partially , the group title row is not displayed but i still see some space like attached image. I thought display:none; will remove the space but it doesnt seem to work. Any clues on how to remove the space?

thanks in advance.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

You need to look at parent layout element and see what properties creates space, as child element already not displayed.
Example or source required to say more.
royjaydAuthor Commented:
hi, thanks for response, this is my grid (with grouping) and store definitions

items: [
				xtype: 'grid',
			    id : currGroupGrid,
			    alias: 'widget.currGroupGrid',			     
			    height :  175,
			    width :  180,
			    stripeRows : false,
				columnLines: true,					
				store: 'currency.CurrencyGroupingStore',
				margin : '3 3 3 3',
			    columns: [				 
				{header: 'Currency', dataIndex: 'currencyCode', flex: 1,sortable:true,hideable:false} //this column has blank spaces
				features: [
				ftype: 'grouping',	  
				groupHeaderTpl: '{name} {[values.rows.length > 1 ? "("+values.rows.length+")" : ""]}',  
				hideGroupedHeader: false,
				startCollapsed: false
			    viewConfig: {
				stripeRows : false,
				getRowClass: function(record, index) {
					//set appropriate css
					if ( == 'ADD'){
						return 'newLineItem'; //'newLineItem';

Open in new window

Ext.define('', {
	id : 'currencyGroupingStore',
    extend: '',
    model: 'CustomerRep.model.currency.CurrencyGroupingModel',   //CurrencyGroupingModel contains currencyCode and currencyGroup
    alias: 'widget.currencyGroupingStore',  
	autoLoad : false,
	groupers: ['currencyGroup'], //grouping done on currencyGroup 
    pageSize : 500,
    proxy: {
        type: 'ajax',         
        url: 'getcurrencyGroupingData.controller',
		reader: {
            type : 'json',
			root : 'data',
			totalProperty : 'total',
			successProperty: 'success'

Open in new window

.x-grid-group-hd .x-grid-cell-inner {
    display: none;}
- try this instead
or .x-group-hd-container {display: none;}
.x-grid-cell-inner class I assume is a parent of .x-grid-group-title, therefore use your rule for .x-grid-cell-inner.
With your code I cannot reproduce your view, html output is required if above solution doesn't work.

Also you can add clear grouping button:
        fbar  : ['->', {
            text:'Clear Grouping',
            iconCls: 'icon-clear-group',
            handler : function(){

Open in new window

it completely removes table row of grouping.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
royjaydAuthor Commented:
Thanks, this works. I have posted another question. I will greatly appreciate your help.
Thanks once again.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.