【发布时间】：2013-04-05 17:55:19
【问题描述】：
我无法将滚动条添加到我使用 Ext 显示的两个视图中。每个视图都是基础视图的扩展，基础视图有autoScroll: true。我已验证元素已正确分配overflow: auto 属性。
我进行了一些搜索，发现 this question 并在应用它的解决方案后（即使我没有使用这个 '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 配置，因此链接问题解决方案无法正常工作。如果它确实支持它，我将如何让滚动条出现？
编辑
我在尝试提出解决方案时发现了一些事情，只要大小是硬编码的（设定的像素数），就可以在视图本身上设置大小。例如添加配置：height: 500, 或带有 height: 500px; 的 CSS 类，但通过 CSS 类的百分比大小根本不起作用——它们甚至不调整组件的大小。
第二次编辑
正如我在 cmets 中对收到的第一个答案所述，组件的大小为 1063（请注意，开发环境位于 1080x1920 监视器（纵向）上，并且 JavaScript 控制台在 Chrome 中运行可见帧的高度是1063 像素。“可见”是指postPanel 被添加到的Views。
我找到了一个临时解决方案，不幸的是我认为它不适合实际的生产版本 - 我正在使用 XTemplate 的 refresh 将组件的高度设置为面板的高度到postPanel 的那个（它设置的高度与它接收的高度相同），这似乎迫使它应用滚动条。我还在postPanel 的resize 事件中添加了一个侦听器，它触发两个Views 的refresh 事件。
添加...
到子视图：
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 */ }
}
}
}
我觉得这不是一个理想的解决方案的主要原因是它破坏了视图自动调整为父级宽度的一半（并在this.setSize() 事件中的this.setSize() 调用中将宽度设置为parent.getWidth() / 2根本不会改变大小，即使调整了父级的大小。除此之外，我不确定这是否会给速度较慢的计算机增加任何开销。
【问题讨论】：
标签： extjs extjs4 autoscroll