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,168
    Vote Rating
    119
    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,731
    Vote Rating
    104
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."