javascript - vbox 中的 ExtJs DataView 高度

标签 javascript css extjs height dataview

我有一个配置文件主页 View (Home2)。在此 View 中,想要显示顶部停靠的标题栏、用户个人资料信息和用户的帖子。

Ext.define('FreescribbleApp.view.Home2', {
extend: 'Ext.Panel',
xtype: 'homepage2',
config: {

    title: 'Home',
    iconCls: 'home',

    styleHtmlContent: true,
    scrollable: true,
    items:[
        {
            xtype: 'titlebarview'
        },
        {
            xtype: 'userinfoview',
            itemId: 'userInfoWrapper',
            height: 150
        },
        {
            itemId: 'homeStage',
            autoScroll: true
        }
    ] 
}
});

我还有一个数据 View :

Ext.define('FreescribbleApp.view.PostList', {
extend: 'Ext.dataview.DataView',
xtype: 'postlist',
config: {
    scrollable: false,
    defaultType: 'postitem',
    useComponents: true
}
});

其中列出了数据项:

Ext.define('FreescribbleApp.view.PostItem', {
extend: 'Ext.dataview.component.DataItem',
xtype: 'postitem',
requires: ['Ext.field.Text'],
config: {
    style: 'background-color: #f00',
    height: 100,
    styleHtmlContent: false,
    authorName: {
        height: 30,
        style: 'background-color: #0f0'
    },
    dataMap: {
        getAuthorName: {
           setHtml: 'userName'
        }
    },
},
applyAuthorName: function(config) {
    return Ext.factory(config, Ext.Component, this.getAuthorName());
},
updateAuthorName: function(newAuthorName, oldAuthorName) {

    if (newAuthorName) {
        this.add(newAuthorName);
    }
    if (oldAuthorName) {
        this.remove(oldAuthorName);
    }
}
});

在我的 HomeController 中,我创建了一个 PostStore,用一些帖子填充它并添加到 DataView。之后,我将 DataView 添加到我的 Home2-View Element HomeStage:

 var postStore = Ext.create('FreescribbleApp.store.PostStore', {
        params: {
            user: localStorage.getItem('userId'),
            token: localStorage.getItem('token'),
            target: localStorage.getItem('userName')
        }
    });

    postStore.load();
    postStore.on('load', function(){
        var currentView = Ext.create('FreescribbleApp.view.PostList');
        currentView.setStore(postStore);
        homeStage.add(currentView);
    });

在设置 DataView 的高度之前,我看不到任何元素。这是一个常见问题,在我的情况下,我无法将 HomeStage 设置为“适合”,因为它只是 Home2 的一部分,并且元素 userinfo 应该与帖子一起滚动。那么如何动态设置 DataView 的大小呢?

我还在我的 Chrome Sencha 调试器中看到,在我的 DataView-List 和我的 DataItems 之间是一个容器,它具有内部所有元素的正确高度。我可以只获取此容器的大小并为我的 DataView 设置 i 吗?它会起作用吗?这会是一个好的做法吗?

最佳答案

对不起,我只需要在我的 DataView 中设置 scrollable: null, and not false!

关于javascript - vbox 中的 ExtJs DataView 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29986791/

相关文章:

javascript - 在 Liferay portlet 中放置一个 iframe

javascript - extjs 中的 mon() 和 on() 有什么区别?

javascript - 在整个谷歌地图上放置透明叠加层(就像模态封面)

javascript - 为禁用的输入框添加 onclick

javascript - Imacros/jQuery TypeError : can't access dead object, 第 816 行(错误代码:-991)

javascript - 如何避免 Angular 4 应用程序中的图像旋转

html - 垂直对齐中间内容与 bootstrap 3

html - CSS float 行为

html - 有条件地覆盖表上的 CSS 类

javascript - 调用 Ext.menu.Menu 实例时获取 ExtJS Selection 对象