Полоса прокрутки панели в Extjs 4 не работает

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

})

Привет, я использую код выше для панели сетки в Extjs4.0.2a. Когда я динамически заполняю данные в хранилище, полосы прокрутки не работают. Я также пробовал использовать doLayout() для панели сетки, но работать с дозатором тоже. Панель сетки находится в окне.

Все, что может решить эту проблему?

На самом деле это работает некоторое время, но не работает все время.

Ответ 1

У меня была такая же проблема. Они используют пользовательскую полосу прокрутки, и она довольно глючная (особенно в хромированном виде). Если вы не собираетесь использовать бесконечную прокрутку, то возможным решением может быть удаление пользовательской полосы прокрутки и использование родной. Для этого просто добавьте следующее в конфигурацию сетки:

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

Ответ 2

Я делал gusersPanel.determineScrollbars(), когда добавляю и удаляю данные из хранилища, и он работает нормально.

Ответ 3

Проблема с этим заключается в том, что прослушиватель прокрутки прикреплен к элементу div в событии afterrender, но тогда, если полоса прокрутки не нужна после операции макета, элемент div удаляется из dom. Затем, когда он понадобился снова, он добавил обратно, но только если прошло достаточно времени, сбор мусора заставит extjs воссоздать div node, и на этот раз он добавлен в dom без повторного добавления прокрутки. Следующий код решает проблему:

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);
        }
    }
});

Ответ 4

Вы написали код в макет: 'fit'. Это не работает autoScroll.

Измените код на некоторую высоту и удалите макет: код 'fit'.

Как это.

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

Это поможет вам. Приветствия.

Ответ 5

Если родительскому контейнеру нужно использовать другой макет, отличный от "fit", как предлагалось в предыдущих комментариях, вы можете попробовать это: установить высоту сетки после загрузки магазина. Более того, вместо того, чтобы вычислять фактическую высоту, это может помочь:

grid.setHeight('100%')

Согласно документации, setHeight может принимать "Строку, используемую для установки стиля высоты CSS ".