树形面板 extjs 4 中的滚动条不起作用

Question

我在 extjs 4 中遇到滚动条问题。 水平滚动条不显示，垂直滚动条不移动。我在 google chrome、IE 和 firefox 中测试了代码。 JavaScript 不显示错误。

这是代码的一部分，在productos_panel中是问题所在：

{
    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
                        }
                    ]
                }
            ]
        }

谢谢大家。

Answer 1

添加此 Ext.override 可能会对您有所帮助。我在 Ext 论坛的某个地方找到了它，从那以后我没有注意到任何 TreeGrid 滚动条问题。如果您使用的是 MVC 结构，只需将其放入一些主要代码文件中，例如 app.js ：

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

我发现这个问题通过在组件实例化后通过 javascript 设置溢出和高度来解决：

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

也许是一个拼凑，但它为我修复了 Ext 错误