Chat-like list view in Sencha Touch

Question

I have a list that is sorted such that the most recent items appear at the bottom just like a chat window, in which the most recent message typically shows up at the bottom.

This list is inside a view that has a toolbar at the top and a textfield at the bottom. The outer layout is vbox and the list is set to flex: 1.

The issue I'm having is that when the list is empty, if I type in a message, it appears at the top of the empty list. On my device, when I have the touch keyboard on, the entire view is pushed up, and I don't see the message that I just entered. The problem solves itself as soon as the list has enough messages to fill the space between the top toolbar and the bottom textfield, because then when I enter a message, it pops up at the bottom of the list rather than at the top.

Is there a way to tweak the layout such that when the list is empty, the message still appears at the bottom and with every message added, the list would keep consuming the space above it?

Please help! Thanks!

Dinkheller Dinkheller · Accepted Answer · 2014-09-19T13:58:05

Add a spacer between the list and the input part.

if you work with a docked:'bottom' item the list is pushed up an never seen again.
if you work with a spacer, the input field is pushed up, but at the same time the screen size is reduced and hence the list is still visible.

style it a like

items: [
    {
        xtype: 'dataview',
        scrollable: false,
    },
    {
        xtype: 'spacer'
    },
    {
        xtype: 'textfield',
        docked: 'bottom'
    }
]

once you are getting too many items you can switch to a list.

Chat-like list view in Sencha Touch

1 Answers