2015-09-15 4 views
-1

Привет, ребята им пытаются добавить горизонтальную прокрутку к моей панели сетки с overflowX: 'scroll', я могу видеть полосу прокрутки, но она до сих пор не функционируют:ExtJs: Добавить горизонтальную полосу прокрутки с вне CSS

Ext.define('Shopware.apps.UnSqlReader.view.window.Window', { 
    extend: 'Enlight.app.Window', 
    alias: 'widget.main-window-view', 
    height: '80%', 
    width: 1200, 
    layout: 'fit', 
    title: '{s name=window_title}SQL Reader{/s}', 
    initComponent: function() { 
    var me = this; 
    me.items = me.getItems(); 
    me.dockedItems = me.createDockedItems(); 
    me.callParent(arguments); 
    }, 
    createDockedItems: function() { 
    var me = this; 
    return [ 
     { 
     width: 185, 
     xtype: 'toolbar', 
     dock: 'top', 
     items: [ 
      { 
      xtype: 'combobox', 
      id: 'sqlField', 
      editable: false, 
      emptyText: 'Select SQL file', 
      displayField: 'name', 
      valueField: 'name', 
      store: Ext.create('Shopware.apps.UnSqlReader.store.UnSqlReaderFileList'), 
      listeners: { 
       change: function (field, newValue) { 
       me.fireEvent('onSqlChange', me, newValue); 
       } 
      } 
      } 
     ] 
     } 
    ]; 
    }, 
    getItems: function() { 
    var me = this; 
    me.grid = Ext.create('Ext.grid.Panel', { 
     alias: 'widget.view-grid-grid', 
     hidden: true, 
     layout: 'fit', 
     height: '80%', 
     width: 500, 
     overflowX: 'scroll', 
     autoScroll: true, 
     columns: [ 
     ], 
     dockedItems: [ 
     me.getPagingbar() 
     ] 
    }); 
    return [me.grid]; 
    }, 
    getPagingbar: function() { 
    var me = this; 
    me.pagingBar = Ext.create('Ext.toolbar.Paging', { 
     dock: 'bottom', 
     displayInfo: true 
    }); 

    return me.pagingBar; 
    } 
}); 

enter image description here

У кого-нибудь есть идея? :) Спасибо!

+0

Вы пытаетесь добавить прокручивать: 'горизонтальный' (или правда) к сетке? –

+0

Да :) попробовал это прямо сейчас без функции:/ – Alex

+0

Если бы я был вами, я бы удалил макет: «fit» (поскольку макет родительской панели уже подходит) и ширина от сетки. Затем добавьте прокручиваемую кнопку. Но я не уверен. –

ответ

1

Снимите layout: 'fit' конф. Конфигурация макета используется для всех дочерних элементов компонента, в котором вы его настраиваете. Если вы положите в окно layout: 'fit', это будет применяться ко всем элементам в элементе-элементе этого окна. В вашем случае сетка получит подходящий макет (как настроено в вашем окне) и автоматически «подойдет» к размеру окна. Он никогда не будет прокручиваться.

1

Не говоря уже о overflowX: 'scroll',autoScroll: true, достаточно, чтобы получить горизонтальную прокрутку

+0

hmm Я могу видеть панель, но я не знаю, почему я не могу ее использовать :(, может быть, мне нужно изменить макет? – Alex

+0

У вас есть проверка после удаления 'overflowX: 'scroll''? В какой версии u вы используете? –

0

Try ниже код:

getItems: function() { 
     var me = this; 
     me.grid = Ext.create('Ext.grid.Panel', { 
      alias: 'widget.view-grid-grid', 
      columns: [ 
      ], 
      viewConfig:{ 
       forceFit:false 
      }, 
      dockedItems: [ 
      me.getPagingbar() 
      ] 
     }); 
     return me.grid; 
    }, 
Смежные вопросы