ExtJS GridPanel Scrollbar не появляется в IE7, но это происходит в Firefox, и т.д.

Question

Setup

У меня есть макет аккордеона, содержащий «свойства» панель, гнездящихся два внутренних панелей. Первая внутренняя панель содержит Ext.DataView, а вторая - Ext.grid.GridPanel. На скриншоте ниже пробел, содержащий значок папки, - это dataview, а ниже - сетка.

Проблема

В Firefox, Chrome и Opera, есть полоса прокрутки, которая появляется, когда мой GridPanel имеет переполнение свойств. Он не отображается в Internet Explorer. Тем не менее, я могу прокручивать, используя мою кнопку прокрутки мыши во всех браузерах, включая IE.

Я также попытался удалить наш собственный файл CSS в случае влияла его как-то, но не было никаких изменений в этом.

Я не уверен, какой именно код должен отображаться, поскольку я не знаю, откуда исходит точная проблема, но вот код для панели mainpanel и gridpanel.

var mainPanel = new Ext.Panel({ 
    id : 'main-property-panel', 
    title : 'Properties', 
    height : 350, 
    autoWidth : true, 
    tbar : [comboPropertyActions], 
    items : [panel1] //panel1 holds the DataView 
}); 

var propertiesGrid = new Ext.grid.GridPanel({ 
    stripeRows : true, 
    height : mainPanel.getSize().height-iconDataView.getSize().height-mainPanel.getFrameHeight(), 
    autoWidth : true, 
    store : propertiesStore, 
    cm : propertiesColumnModel 
}) 

//Add gridpanel to mainPanel 
mainPanel.add(propertiesGrid); 
mainPanel.doLayout(); 

Любая помощь в правильном направлении была бы принята с благодарностью. Спасибо.

Answer 1

Мое решение этой проблемы - удаление autoWidth : true из моей конфигурации gridpanel. Вместо этого я вручную устанавливаю значение ширины и меняю размер и ширину сетки на размер панели тела панели. Ниже мой модифицированный код вместе с функцией, чтобы вручную установить размер моей сетки, когда изменяется ширина и высота панели свойств.

var propertiesGrid = new Ext.grid.GridPanel({ 

    stripeRows : true, 
    height : mainPanel.getSize().height-iconDataView.getSize().height-mainPanel.getFrameHeight(), 
    width : mainPanel.getSize().width, 
    store : propertiesStore, 
    cm : propertiesColumnModel 

}) 

//Add gridpanel to mainPanel 
mainPanel.add(propertiesGrid); 
mainPanel.doLayout(); 

mainPanel.on('bodyresize', function() { 

    //propertiesGrid.setSize(Width, Height); 
    propertiesGrid.setSize(mainPanel.getSize().width, 
    mainPanel.getSize().height-iconDataView.getSize().height-mainPanel.getFrameHeight()); 

}); 

благодарит за вашу помощь!

Answer 2

Появляется ли полоса прокрутки, если вы изменяете размер/скрываете/показываете панель? Если это так, это может быть проблема IE hasLayout. Если нет, это, вероятно, проблема с вашим макетом (или, возможно, с ошибкой Ext). Трудно сказать что-либо из того, что вы опубликовали. Вы спрашивали на форумах Ext?

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

Answer 3

Я уверен, что нашел намного лучшее и легкое решение. Просто установите width и height в '100%' подобное:

width: '100%', 
height: '100%' 

при создании Ext.grid.Panel.

Я отвечаю на такой старый вопрос, потому что это первый, который вы получаете при поиске в google.