2016-05-10 1 views
0

В моей ExtJS Grid, я использую следующий код, чтобы объявить просветляющий:ExtJS 6 выпадающее событие в PagingToolbar не работает в режиме переполнения

Ext.define('Ext.toolbar.PagingComboToolbar', { 
    extend: 'Ext.PagingToolbar', 
    resources: { 
    displayMessage: Resources.Labels.Ext_Paging_DisplayMsg, 
    emptyMessage: Resources.Labels.Ext_Paging_EmptyMsg 
}, 
    displayInfo: true, 
    enableOverflow: true, 
    pageSize: 50,  
    initComponent: function() { 
     var me = this; 
     this.store.pageSize = this.pageSize; 
     var combo = new Ext.form.ComboBox({ 
     name: 'perpage', 
     width: 75, 
     store: new Ext.data.ArrayStore({ 
      fields: ['id'], 
      data: [ 
       ['10'], 
       ['20'], 
       ['50'], 
       ['75'], 
       ['100'], 
       ['150'] 
      ] 
     }), 
     value: this.pageSize, 
     listWidth: 70, 
     triggerAction: 'all', 
     displayField: 'id', 
     valueField: 'id', 
     editable: false, 
     forceSelection: true, 
     listeners: { 
      select: { 
       fn: function (combo, record) { 
        var newPagesize = parseInt(record.get('id'), 10); 
        this.pageSize = newPagesize; 
        this.store.pageSize = newPagesize; 
        this.store.loadPage(this.store.currentPage); 
       }, 
       scope: this 
      } 
     } 
    }); 

    Ext.apply(this, { 
     displayMsg: this.resources.displayMessage, 
     emptyMsg: this.resources.emptyMessage, 
     items: [ 
      combo 
     ] 
    }); 

    this.callParent(arguments); 
} 
}); 

Для полноты картины, это то, как я объявляю этот класс в определение моей управляющей сеткой в ​​радиолампе в:

bbar: Ext.create('Ext.toolbar.PagingComboToolbar', { 
      store: store, 
      enableOverflow: true, 
}), 

Обратите внимание, что самое главное, чтобы заметить здесь является выпадающим, что я прилагаю к механизму подкачки. Он позволяет вам определять размер страницы «на лету». Это очень хорошо работает, когда сетка не находится в режиме переполнения (я не могу найти лучшего способа описать ее).

Как только я уменьшу сетку, появится значок .x-toolbar-more-icon: до появления значка, и после нажатия на этот значок в маленьком меню будет отображаться выпадающая скобка. Я по-прежнему вижу варианты (10,20,50, ...), и я могу нажать на них, но событие select больше не запускается. Если я решит снова сделать сетку более широким в любой точке (достаточно широко, чтобы отображать выпадающий список в сетке, а не скрываться за кнопкой «больше»), событие выбора неожиданно появляется снова, и все работает отлично.

Сказав это, оригинальные (из коробки) кнопки продолжают работать. Например, если кнопка обновления страницы также присутствует в меню, нажатие кнопки фактически обновит сетку.

Вот Fiddle, который показывает проблему. Если вы играете с шириной сетки, вы сможете воспроизвести проблему (например, 400 px)

Любые идеи?

ответ

1

Похоже, это общая ошибка, что также произошло в более ранних версиях: https://www.sencha.com/forum/showthread.php?308363

В качестве обходного пути, вы можете использовать change событие вместо select. Проверьте свой Fiddle измененный.