Scrollbar in treepanel extjs 4 not work

Question

I'm a problem with scrollbar in extjs 4. The horizontal scrollbars don't show and the vertical scrollbars don't move. I test the code in google chrome, IE and firefox. The javascript don't show errors.

This is a part of code, in productos_panel is the problem:

{
    xtype: 'container',
    id: 'panel_side_bar',
    margin: 5,
    width: 250,
    autoScroll:true,
    layout: {
        type: 'border'
    },
    region: 'west',
    items: [
        {
            xtype: 'treepanel',
            id: 'productos_panel',
            title: 'Listado de Productos',
            rootVisible:false,
            autoScroll : true,
            region: 'center',
            root: getDirectJSON("<?php echo url_for("@get_categoria_prod",true)?>"),
            viewConfig: {
                id: 'productos'
            },
            listeners: {
                itemclick: {
                        fn: evtClickItemTree
                }
            }
        },
        {
            xtype: 'container',
            height: 51,
            id: 'botonera',
            layout: {
                type: 'vbox'
            },
            region: 'north',
            items: [
                text_input_filtro,
                {
                    xtype: 'container',
                    id: 'contenedor_btns_filtro',
                    height: 25,
                    width:250,
                    layout: {
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'button',
                            id: 'button_filtrar',
                            text: 'Filtrar',
                            handler: evtButtonFiltrar,
                            flex: 1
                        },
                        {
                            xtype: 'button',
                            id: 'button_mostrar_todo',
                            text: 'Mostrar Todo',
                            handler: evtButtonMostrarTodo,
                            flex: 1
                        }
                    ]
                }
            ]
        }

Thanks for all.

Answer 1

Adding this Ext.override might help you. I found it somewhere in the Ext forums and I haven't noticed any TreeGrid scrollbar issues since. Just throw it in some major code file, such as app.js if you're using the MVC structure:

Ext.override(Ext.grid.Scroller, {

  afterRender: function() {
    var me = this;
    me.callParent();
    me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
    Ext.cache[me.el.id].skipGarbageCollection = true;
    // add another scroll event listener to check, if main listeners is active
    Ext.EventManager.addListener(me.scrollEl, 'scroll', me.onElScrollCheck, me);
    // ensure this listener doesn't get removed
    Ext.cache[me.scrollEl.id].skipGarbageCollection = true;
  },

  // flag to check, if main listeners is active
  wasScrolled: false,

  // synchronize the scroller with the bound gridviews
  onElScroll: function(event, target) {
    this.wasScrolled = true; // change flag -> show that listener is alive
    this.fireEvent('bodyscroll', event, target);
  },

  // executes just after main scroll event listener and check flag state
  onElScrollCheck: function(event, target, options) {
    var me = this;

    if (!me.wasScrolled) {
      // Achtung! Event listener was disappeared, so we'll add it again
      me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
    }
    me.wasScrolled = false; // change flag to initial value
  }

});

Answer 2

I found that this problem was fixed for me by setting the overflow and height via javascript after the component was instantiated:

Ext.getCmp('navTree').el.dom.style.height = '100%';
Ext.getCmp('navTree').el.dom.style.overflow = 'scroll';

A kludge perhaps, but it fixes the Ext bug for me