Question

我无法将滚动条添加到我用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配置因此链接问题解决方案无法工作的原因。如果它确实支持它，我将如何让滚动条显示出来？

修改

我尝试提出解决方案时发现的一些事情，只要大小是硬编码的（一定数量的像素），在View上设置大小就可以工作。例如添加config：height: 500,或带有height: 500px;的CSS类，但通过CSS类的百分比大小根本不起作用 - 它们甚至不会调整组件的大小。

第二次编辑

正如我在收到的第一个回答的评论中所述，该组件的大小为1063（需要注意的是，开发环境位于1080x1920显示器上（纵向）并且JavaScript控制台正在运行Chrome浏览器的可见帧高度为1063像素。“可见”我的意思是postPanel被添加到View。

我找到了一个临时解决方案，遗憾的是我不认为这对于实际的生产版本是理想的 - 我正在使用refresh的{{1}}来将组件的高度设置为面板的高度与XTemplate的高度（设置与接收的高度相同），这似乎迫使它应用滚动条。我还为postPanel的{{1}}事件添加了一个监听器，用于触发两个resize的{{1}}事件。

添加......

到子视图：

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 */ } } } }事件根本不会改变大小，即使父级已调整大小。除此之外，我不确定这是否会给较慢的计算机增加任何开销。

Answer 1

因此，只要组件知道它应该适合的框的大小，autoScroll就应该工作。如果您不想设置特定的框大小，请尝试将视图组件放入具有适合布局的视口中。然后视口将决定框的大小，您的视图应该开始在分配的空间中滚动。此主体用于所有容器 - 某些容器必须指定容器的大小。视口是默认显示全屏大小的神奇组件。

Answer 2

尝试将每个视图放在一个layout: 'fix'的容器中。然后，当内容需要时，autoScroll: true视图将强制滚动条。

Ext.view.View是否支持autoScroll配置选项？

2 个答案: