How to programatically scroll a gridpanel but hide it's scrollbar?

[meehigh]

I have a viewport and in the center region a tabpanel which has a tab with border layout. In the center region of the tab I have a grid and in the south another grid. I managed to synchronize the horizontal scrolling of the two grids but i cannot hide the scrollbar of the first grid. The reason I am doing this is to create the illusion of a single grid, which has a fixed row just above the paging toolbar, for displaying totals. Here is a screenshot: http://img408.imageshack.us/img408/3...hotoy.jpgBelow is the relevant portion of my code. I tried setting the baseCls of the first grid to a class that has overflow:hidden, but then i can't scroll the grid programatically anymore. I also tried setting autoheight to true, but with the same effect. Any help is very much appreciated. Thank you.

 var SumeDatorateDS = new Ext.data.JsonStore({  root: 'content.root.SumaDatorata',  totalProperty: 'content.root.NrMaximInregistrari',  idProperty: 'ID',  baseParams: {   format: 'json',   IDContribuabil: IDContribuabil,   proc: 'eTax.dbo.getSumeDatorate'  },  fields: ['ID','Sursa', 'CodDebit', 'ContBancar', 'NrMatricol', 'Ramasita', 'MajorareRamasita', 'Curent', 'Majorare', 'Bonificatie', 'Total'],  proxy: new Ext.data.ScriptTagProxy({   url: eTaxServiceUrl   }) });  var SumeDatorateTotaluriDS = new Ext.data.JsonStore({  fields: ['ID','Sursa', 'CodDebit', 'ContBancar', 'NrMatricol', 'Ramasita', 'MajorareRamasita', 'Curent', 'Majorare', 'Bonificatie', 'Total'] });  var PlatiDS = new Ext.data.JsonStore({  root: 'content.root.Plata',  totalProperty: 'content.root.NrMaximInregistrari',  idProperty: 'ID',  baseParams: {   format: 'json',   IDContribuabil: IDContribuabil,   proc: 'eTax.dbo.getPlati'   },  fields: ['ID', 'Sursa', 'CodDebit', 'CuDebit', 'ContBancar', 'TipDocument', 'NrDocument',   {   name: 'DataDocument',   type: 'date',   dateFormat: 'Y-m-dTH:i:s'  },  'Ramasita', 'MajorareRamasita', 'Bonificatie', 'Curent', 'Majorare', 'Total'],  proxy: new Ext.data.ScriptTagProxy({   url: eTaxServiceUrl  }) });       SumeDatorateTBar = {  xtype: 'toolbar',        items: [{   xtype: 'tbbutton',   cls: 'x-btn-text-icon',   icon: 'img/delete.png',   text: 'Inchide',   handler: function(){    TabPanel = Ext.getCmp('centru');    TabPanel.remove(TabPanel.getActiveTab());   }  }] };  SumeDatorateSliderValue = new Ext.form.TextField({  id:'SumeDatorateSliderValue',  width:27,  value: NrInregistrariPerPagina,  listeners: {              specialkey: function(f,e){                if (e.getKey() == e.ENTER) {                    newValue = parseInt(this.getValue(),10);     if (isNaN(newValue)){      newValue = 10;       this.setValue(newValue);     }     NrInregistrariPerPagina = newValue;     SumeDatorateSlider.setValue(parseInt(NrInregistrariPerPagina,10));     SumeDatorateDS.load({params:{startRowIndex:0,maximumRows: parseInt(NrInregistrariPerPagina,10)}});     SumeDatorateBBar.pageSize = parseInt(NrInregistrariPerPagina,10);                }              }            }   });  SumeDatorateSlider = new Ext.slider.SingleSlider({  id:'SumeDatorateSlider',  width: 125,  minValue: 1,  maxValue: 100,  value: NrInregistrariPerPagina,  listeners: {   change: function(scope,newValue,oldValue){    NrInregistrariPerPagina = newValue;    SumeDatorateSliderValue.setValue(NrInregistrariPerPagina);    SumeDatorateDS.load({params:{startRowIndex:0,maximumRows: parseInt(NrInregistrariPerPagina,10)}});    SumeDatorateBBar.pageSize = parseInt(NrInregistrariPerPagina,10);   }  } });  SumeDatorateBBar = new Ext.PagingToolbar({  //xtype: 'paging',  id: 'SumeDatorateBBar',  pageSize: parseInt(NrInregistrariPerPagina,10),  store: SumeDatorateDS,  displayInfo: true,  displayMsg: 'Afisate inregistrarile {0} - {1} din {2}',  emptyMsg: "Nu exista inregistrari de afisat.",  items:['-',' ',SumeDatorateSliderValue,' ',' ',SumeDatorateSlider] });   SumeDatorateGrid = new Ext.grid.GridPanel({  id: 'SumeDatorateGrid',  region:'center',  border: false,  store: SumeDatorateDS,  //baseCls: 'no-x-scrollbar',  stripeRows: true,  tbar: SumeDatorateTBar,  //autoScroll:false,  //autoHeight: true,  //autoWidth: true,  columns: [{   id: 'ID',   header: 'ID',   dataIndex: 'ID',   width: 60,   hidden:true  }, {   id: 'Sursa',   header: 'Sursa',   dataIndex: 'Sursa',   width: 180,   menuDisabled: true  }, {   id: 'CodDebit',    header: 'Cod Debit',   dataIndex: 'CodDebit',    width: 60,   menuDisabled: true  }, {   id: 'ContBancar',    header: 'Cont Bancar',   dataIndex: 'ContBancar',   width: 175,   menuDisabled: true  }, {   id: 'NrMatricol',    header: 'Nr. Matricol',   dataIndex: 'NrMatricol',   width: 100,   menuDisabled: true  }, {   id: 'Ramasita',    header: 'Ramasita',   dataIndex: 'Ramasita',    width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true  }, {   id: 'MajorareRamasita',    header: 'Majorare Ramasita',   dataIndex: 'MajorareRamasita',   width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true  }, {   id: 'Curent',   header: 'Curent',   dataIndex: 'Curent',   width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true  }, {   id: 'Majorare',    header: 'Majorare',   dataIndex: 'Majorare',   width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true  }, {   id: 'Bonificatie',    header: 'Bonificatie',   dataIndex: 'Bonificatie',   width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true  }, {   id: 'Total',    header: 'Total',   dataIndex: 'Total',   width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true  }],  listeners:{   columnresize:function(colIndex,newSize){    SumeDatorateGridTotal.getColumnModel().setColumnWidth(colIndex,newSize);   }  } });  SumeDatorateGridTotal = new Ext.grid.GridPanel({  id: 'SumeDatorateGridTotal',  region:'south',  border: false,  //anchor: '100%',  height: 65,  autoScroll: false,  store: SumeDatorateTotaluriDS,  bbar: SumeDatorateBBar,  hideHeaders: true,  columns: [{   id: 'ID',   header: 'ID',   dataIndex: 'ID',   width: 60,   hidden:true,   css: 'background-color: dfe8f6; font: bold;'  }, {   id: 'Sursa',   header: 'Sursa',   dataIndex: 'Sursa',   width: 180,   menuDisabled: true,   css: 'background-color: dfe8f6; font: bold;'  }, {   id: 'CodDebit',    header: 'Cod Debit',   dataIndex: 'CodDebit',    width: 60,   menuDisabled: true,   css: 'background-color: dfe8f6; font: bold;'  }, {   id: 'ContBancar',    header: 'Cont Bancar',   dataIndex: 'ContBancar',   width: 175,   menuDisabled: true,   css: 'background-color: dfe8f6; font: bold;'  }, {   id: 'NrMatricol',    header: 'Nr. Matricol',   dataIndex: 'NrMatricol',   width: 100,   menuDisabled: true,   css: 'background-color: dfe8f6; font: bold;'  }, {   id: 'Ramasita',    header: 'Ramasita',   dataIndex: 'Ramasita',    width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true,   css: 'background-color: dfe8f6; font: bold;'  }, {   id: 'MajorareRamasita',    header: 'Majorare Ramasita',   dataIndex: 'MajorareRamasita',   width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true,   css: 'background-color: dfe8f6; font: bold;'  }, {   id: 'Curent',   header: 'Curent',   dataIndex: 'Curent',   width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true,   css: 'background-color: dfe8f6; font: bold;'  }, {   id: 'Majorare',    header: 'Majorare',   dataIndex: 'Majorare',   width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true,   css: 'background-color: dfe8f6; font: bold;'  }, {   id: 'Bonificatie',    header: 'Bonificatie',   dataIndex: 'Bonificatie',   width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true,   css: 'background-color: dfe8f6; font: bold;'  }, {   id: 'Total',    header: 'Total',   dataIndex: 'Total',   width: 100,   align: 'right',   renderer: MyNumberRenderer,   menuDisabled: true,   css: 'background-color: dfe8f6; font: bold;'  }],  listeners:{   bodyscroll:function(scrollLeft, scrollTop){    newx = SumeDatorateGridTotal.getPosition()[0];    y = SumeDatorateGrid.getPosition()[1];    //SumeDatorateGrid.setPagePosition(newx-scrollLeft,y);    SumeDatorateGrid.getView().scroller.dom.scrollLeft = scrollLeft;    SumeDatorateTab.doLayout();   }  } });  SumeDatorateTab = new Ext.Panel({  id:'SumeDatorateTab',  title:'Sume Datorate',  layout:'border',  bodyStyle: 'background-color: white',  closable: true,  listeners:{   activate:function(){    SumeDatorateDS.load({     params: {      'startRowIndex': 0,      'maximumRows': parseInt(NrInregistrariPerPagina,10)     },     callback: function(records,options,success){      if (!success){       Ext.Msg.alert('Avertizare',MyGrid.store.reader.jsonData.error);        }      Totaluri = [SumeDatorateDS.reader.jsonData.content.root.Totaluri];      SumeDatorateTotaluriDS.loadData(Totaluri);            //Ext.Msg.alert(SumeDatorateDS.reader.jsonData.content.root.Totaluri.Curent,'salut');     },     scope: this    });   }  },  items:[SumeDatorateGrid, SumeDatorateGridTotal] });

[aconran]

The image link you have provided is dead.

To remove the scrollbars you can use the scrollOffset configuration and set it to 0.

(In your grid configuration)

viewConfig: {
   scrollOffset: 0
}

You can then programmatically scroll the grid by invoking the focusRow method on the gridview with a specified index.

grid.getView().focusRow(rowIdx);

[mankz]

try setting a cls property on your grid of 'myGrid' for example. Then use this CSS:

.myGrid .x-grid3-scroller
{
    overflow: hidden !important;
}

[meehigh]

try setting a cls property on your grid of 'myGrid' for example. Then use this CSS:

.myGrid .x-grid3-scroller
{
    overflow: hidden !important;
}

This works in all the browsers except internet explorer. Is there any solution? Also, vertical scrolling for first grid is disabled after I set the new class, and I tried to set overflow-x: hidden, but no luck. Please help.