Мне не удалось добавить полосы прокрутки к двум представлениям, отображаемым с помощью Ext. Каждый вид является расширением базового вида, а базовый имеет autoScroll: true. Я убедился, что элементам правильно присвоено свойство overflow: auto.
Я провел несколько поисков и нашел этот вопрос , и после применения его решения (хотя я не использовал этот 'vbox' макет), он не решил мою проблему.
Вот базовый вид:
Ext.define('Our.extensions.baseList', {
extend: 'Ext.view.View',
itemSelector: 'div.postContainer',
autoScroll: true,
initComponent: function(){
this.tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div name="postContainer" class="postContainer">',
// Contains Layout for posts
'</div>',
{ // can run internal functions within a template
createButton: function(idPost){
// Creates layout for buttons and returns it
}
}
);
this.callParent(arguments);
}
});
И два дочерних представления:
Ext.define('Our.view.post.convList', {
extend: 'Our.extensions.baseList',
alias : 'widget.convList',
emptyText: 'No Conversation Followed',
title: 'Coversations',
initComponent: function(){
this.store = new Ext.create('Ext.data.Store', {
id:'convStore',
model: 'Our.model.Post',
data: []
});
this.callParent(arguments);
}
});
И
Ext.define('Our.view.post.postList', {
extend: 'Our.extensions.baseList',
alias : 'widget.postList',
emptyText: 'No Posts',
title: 'Posts'
});
В конечном счете, мой вопрос заключается в том, поддерживает ли Ext.view.View свойство конфигурации autoScroll (или просто игнорирует его, как кажется), которое указано в документации Sencha как допустимое свойство конфигурации. Я знаю, что он не поддерживает конфигурацию layout, поэтому решение связанных вопросов не сработало. Если он это поддерживает, как бы мне заставить отображаться полосы прокрутки?
EDIT
Некоторые вещи, которые я обнаружил в своих попытках найти решение, установка размера в самом представлении работает до тех пор, пока размер жестко задан (заданное количество пикселей). Например, добавление конфигурации: height: 500, или CSS-класса с height: 500px;, но процентные размеры через классы CSS не работают вообще - они даже не определяют размер компонента.
ВТОРОЕ РЕДАКТИРОВАНИЕ
Как я отмечал в комментариях к первому полученному ответу, компонент получал размер 1063 (обратите внимание, что среда разработки находится на мониторе 1080x1920 (в портретной ориентации) и с запущенной в Chrome консолью JavaScript она высота видимой рамки составляет 1063 пикселей. Под «видимым» я подразумеваю postPanel, к которому добавляются View s.
Я нашел временное решение, к сожалению, я не думаю, что оно идеально подходит для реального выпуска продукции - я использую refresh из XTemplate, чтобы установить высоту компонента на высоту панели до postPanel (который устанавливает ту же высоту, что и при получении), и это, кажется, заставляет его применять полосы прокрутки. Я также добавил слушателя к событию resize postPanel, которое запускает событие refresh двух View с.
Дополнения ...
на ребенка:
listeners: {
refresh: function() {
var parent = this.up('postPanel');
if (parent != undefined) {
this.setSize({
width: undefined,
height: parent.getHeight()
});
}
}
}
и postPanel:
listeners: {
resize: function() {
var postList = this.down('postList');
if (postList != undefined) {
try {
postList.fireEvent('refresh');
} catch(e) { /* ignored */ }
}
var convList = this.down('convList');
if (convList != undefined) {
try {
convList.fireEvent('refresh');
} catch(e) { /* ignored */ }
}
}
}
Основная причина, по которой я считаю, что это не идеальное решение, заключается в том, что он разбивает представления автоматически, изменяя размер на половину ширины родительского элемента (и устанавливая ширину на parent.getWidth() / 2 в вызове this.setSize() в событии refresh не изменяет размер вообще, даже если размер родительского элемента изменен. В дополнение к этому, я не уверен, добавит ли это какие-либо издержки для более медленных компьютеров или нет.