Results 1 to 2 of 2

Thread: Ext Js 4.2 Grid panel not showing Horizontal scrollbars

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    India
    Posts
    30
    Answers
    2

    Default Ext Js 4.2 Grid panel not showing Horizontal scrollbars

    So I want to give my Grid Panel height 100% so that the grid is fit in my big screen, when I give height and width in pixels both horizontal and vertical scrollbars are working fine i.e., they're enabled when there are more columns and disabled when there are less columns.

    Here is my code

    Code:
    Ext.define('tz.ui.TsGridPanel', {
       extend: 'Ext.grid.Panel',
       frame:true,
       anchor:'100%',
       width :'100%',
       height:'100%',
       overflowX: 'scroll',
       renderTo: Ext.getBody(),   
       title:'some title',
       loadMask: false,
       sortable : true,
       deferRowRender: false,    
          features:[{
              ftype:'summary'
          }],
        
        initComponent: function() {
            var me = this;
            me.store = ds.tneSummaryStore;        
            me.selModel = Ext.create('Ext.selection.CheckboxModel');
            me.columns = [ { //some cols
          }]
    
     me.viewConfig = {
            stripeRows: true,
            trackOver: false,
            getRowClass: function (record, rowIndex, rowParams, store) {
                    return record.get('type').match('VE') || record.get('type').match('VS') ? 'back-blue' : '';
                    },           
            };
    });
    The above panel is kept inside a mgmtPanel

    Code:
    Ext.define('tz.ui.TsMgmtPanel', {
        extend: 'tz.ui.BaseFormPanel',
        activeItem: 0,
        layout: {
            type: 'card',
        },
        title: '',
        bodyPadding: 10,
        border:false,
        frame : false,
     initComponent: function() {
            var me = this;
            me.tPanel = new tz.ui.TsSearchPanel({manager:me});
    
      initScreen: function(){
                    this.clearMessage();
                    this.getLayout().setActiveItem(0);
      }
    }

    And MgmtPanel.initscreen is called when a link is clicked.

    I tried overflow-x, autoscroll:true. Nothing worked

    autoscroll:'true' --> Horizontalscroll is displayed in disabled state
    overflow-x is --> not showing any vertical scrollbars.
    ---Mark this post if this Answers or Helps---
    Cheers
    FunnyFox

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Your code seems incomplete.

    You can use a viewport to consume the body with a layout: 'fit' and place the grid inside and that should be it.

    Since you are using a card layout, that defaults to 'fit'. There should be no need to add all of the other configs to resize an show the scrollbars properly.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •