ExtJs DataView height inside a vbox

Question

I've got a profile home view (Home2). In this view a want to show a top docked title bar, a user profile info and user's posts.

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
        }
    ] 
}
});

I also have a DataView:

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

which lists DataItems:

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);
    }
}
});

in my HomeController I create a PostStore, fill it with some posts and add to the DataView. After that I add the DataView to my 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);
    });

I can't see any items till I set height of the DataView. It is a common issue, bun in my case I cannot set my HomeStage to 'fit' since it's only a part of Home2 and the item userinfo should get scrolled with the posts. So how can I set size of my DataView dynamicly?

I also see in my Sencha debuger for Chrome that between my DataView-List and my DataItems is a Container, which has the right heigh of all the items inside. can I just get the size of this container and set i for my DataView? Will it work and will it be a good practice?

user3680648 user3680648 · Accepted Answer · 2015-05-01T13:21:12

0

votes

I'm sorry, i just had to set scrollable: null, and not false in my DataView!

ExtJs DataView height inside a vbox

1 Answers