1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    9
    Vote Rating
    0
    meehigh is on a distinguished road

      0  

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

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


    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.
    Code:
     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] });

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,369
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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)
    Code:
    viewConfig: {
       scrollOffset: 0
    }

    You can then programmatically scroll the grid by invoking the focusRow method on the gridview with a specified index.
    Code:
    grid.getView().focusRow(rowIdx);
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,761
    Vote Rating
    108
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


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

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

  4. #4
    Ext User
    Join Date
    Jun 2010
    Posts
    9
    Vote Rating
    0
    meehigh is on a distinguished road

      0  

    Default


    Quote Originally Posted by mankz View Post
    try setting a cls property on your grid of 'myGrid' for example. Then use this CSS:

    Code:
    .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.

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    6
    Vote Rating
    -1
    tharahan is an unknown quantity at this point

      0  

    Default


    I tried
    .quickFilterGrid .x-grid-view
    {
    overflow: hidden !important;
    }

    works in IE too

Similar Threads

  1. Programatically setting scroll Position in GXT Window Object
    By sarwat in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 22 Mar 2010, 11:38 AM
  2. [SOLVED] How to "scroll by" a GridPanel programatically?
    By Pachat in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 19 Jan 2010, 12:15 AM
  3. Programatically getting the values of cells in a gridPanel column
    By stedav in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 18 Nov 2009, 3:06 AM
  4. Replies: 4
    Last Post: 25 Jul 2009, 3:55 AM
  5. How to scroll a Grid programatically ?
    By rvillane in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 6 Oct 2008, 7:44 AM

Thread Participants: 3

Tags for this Thread