rejilla Panel de barras de desplazamiento en 4 Extjs no trabajar

Question

var gusersPanel = Ext.create('Ext.grid.Panel', { 
    flex:1, 
    columns: [{ 
     header: 'User Login', 
     dataIndex: 'user_login', 
     width:150 
    },{ 
     header: 'User Name', 
     dataIndex: 'user_nicename', 
     width:150 
    },{ 
     header:'Privledge', 
     dataIndex:'admin', 
     width:150 
    }], 
    autoScroll: true, 
    layout:'fit', 
    selModel: gusersSel, 
    store: gusersStore 

})

Hola Estoy utilizando el código anterior para la rejilla del panel en Extjs4.0.2a Cuando poblar dinámicamente los datos en el almacén de las barras de desplazamiento no están funcionando. También he intentado usar doLayout() para el panel de cuadrícula pero también trabajo dosent. El panel de la cuadrícula está en una ventana.

¿Algo que pueda resolver este problema?

Actualmente funciona un tiempo pero no funciona todo el tiempo.

Answer 1

Tuve el mismo problema. Usan barra de desplazamiento personalizada y es bastante buggy (especialmente en cromo). Si no va a utilizar scroll infinito, la posible solución podría ser eliminar la barra de desplazamiento personalizada y usar una nativa. Para ello sólo tiene que añadir lo siguiente al de configuración de la red:

var gusersPanel = Ext.create('Ext.grid.Panel', { 
    scroll   : false, 
    viewConfig  : { 
    style   : { overflow: 'auto', overflowX: 'hidden' } 
    }, 
    // ... 
}); 

Answer 2

hice gusersPanel.determineScrollbars() cuando estoy añadiendo y quitando los datos de tienda y que está trabajando muy bien.

Answer 3

El problema con esto es que el detector de desplazamiento se adjunta al elemento div en el evento afterrender, pero si la barra de desplazamiento no se necesita después de una operación de diseño, el elemento div se elimina del dom. Luego, cuando se necesita de nuevo, se vuelve a agregar, pero solo si ha transcurrido el tiempo suficiente, la recolección de basura hace que extjs vuelva a crear el nodo div y esta vez se agrega al dom sin volver a unir el escucha de desplazamiento. El siguiente código resuelve el problema:

Ext.override(Ext.grid.Scroller, { 
    onAdded: function() { 
     this.callParent(arguments); 
     var me = this; 
     if (me.scrollEl) { 
      me.mun(me.scrollEl, 'scroll', me.onElScroll, me); 
      me.mon(me.scrollEl, 'scroll', me.onElScroll, me); 
     } 
    } 
}); 

Answer 4

Escribió el código en el diseño: 'ajustar'. No funcionó autoScroll.

Cambie el código a cierta altura y elimine el diseño: código de "ajuste".

Me gusta.

var gusersPanel = Ext.create('Ext.grid.Panel', { 
    flex:1, 
    columns: [{ 
    ........... 
    }], 
autoScroll: true, 
//layout:'fit', 
height: 130, 
selModel: gusersSel, 
store: gusersStore 

Es útil. Aclamaciones.