2

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

编辑

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

第二次编辑

正如我在收到的第一个答案的评论中所说，组件正在获得大小1063（注意，开发环境位于 1080x1920 监视器（纵向）上，并且 JavaScript 控制台在 Chrome 中运行，它是可见框架的高度是1063像素。“可见”是指正在添加 s的postPanel那个。View

我找到了一个临时解决方案，不幸的是，我认为它不适合实际的生产版本 - 我使用 的refresh将XTemplate组件的高度设置为面板的高度postPanel（设置相同高度，因为它一直在接收），这似乎迫使它应用滚动条。我还为触发两个s的事件的resize事件添加了一个侦听器。postPanelrefreshView

补充...

给孩子的意见：

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

4

2 回答 2

1

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

于 2011-12-09T21:16:04.753 回答
0

Try to place each of your views in a container with layout: 'fix'. Then the autoScroll: true of the views will force the scroll bars, when the content requires it.

于 2013-04-05T09:55:19.170 回答