Question

I recently discovered the emptyText config value for lists in Sencha Touch to display when the store is empty. The problem I am having is that this text appears in the top left corner and I can’t seem to find a way to place it in the middle of the screen.

Answer 1

The emptyText property accepts HTML. Example:

CSS: 
.emptyText {
    text-align:center;
    color: #999;
}


JS:
emptyText: '<div class="emptyText">No members yet</div>'

For vertical centering you will have to use the CSS3 Flexible box model

Example CSS:

//vertical and horizontal centering based on fixed height
    height:200px;  
    display:-webkit-box;
    -webkit-box-orient: horizontal;        
    -webkit-box-align:center;
    -webkit-box-pack:center;