Griglia Pannello barre di scorrimento in ExtJS 4 non lavora

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 

})

Ciao Sto usando il codice di cui sopra per la griglia del pannello in Extjs4.0.2a Quando io popolo dei dati in modo dinamico nel negozio le barre di scorrimento non funzionano. Ho anche provato a usare doLayout() per il grid panel ma anche il dosent. Il pannello della griglia è in una finestra.

Tutto ciò che può risolvere questo problema?

Attualmente funziona per un po 'di tempo ma non funziona sempre.

Answer 1

Ho avuto lo stesso problema. Usano la barra di scorrimento personalizzata ed è piuttosto buggy (soprattutto in chrome). Se non si intende utilizzare lo scroll infinito, la soluzione possibile potrebbe essere quella di rimuovere la barra di scorrimento personalizzata e utilizzare quella nativa. Per fare questo basta aggiungere il seguente alla configurazione della griglia:

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

Answer 2

ho fatto gusersPanel.determineScrollbars() quando sto aggiunta e la rimozione dei dati dal negozio e si sta lavorando bene.

Answer 3

Il problema con questo è che il listener di scorrimento è collegato all'elemento div sull'evento afterrender, ma se la barra di scorrimento non è necessaria dopo un'operazione di layout, l'elemento div viene rimosso dal dom. Quindi, quando è necessario nuovamente, viene aggiunto nuovamente, ma solo se è trascorso abbastanza tempo nella garbage collection, gli extjs ricreano il nodo div e questa volta viene aggiunto alla dom senza ricollegare il listener di scroll. Il seguente codice risolve il 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

Hai scritto il codice per il layout: "adatto". Non ha funzionato autoScroll.

Cambiare il codice a un'altezza e rimuovere il layout: codice 'fit'.

In questo modo.

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

È di aiuto. Saluti.