chat history on extJs

Question

I need to display chat history in my application. It should look something like this: Can I use the component Tree Panel for this, or is there an easier way to display what I need? I don't understand how I can display the data in the case of the Tree Panel

Answer 1

I did this with a dataview. Storing the messages in a store.

layout: 'vbox',
    items: [
        {
            xtype: 'dataview',
            bodyCls: 'chat chatbody',
            flex: 1,
            scrollable: true,
            bind: {
                store: '{chat}'
            },
            itemTpl: new Ext.XTemplate(
                '<div',
                    '<tpl if="this.isDateSet(username)"> class="conversation-start">',
                        '{[values.timestamp.toLocaleDateString()]}',
                    '<tpl else>',
                        '<tpl if="this.isMyMessage(username)"> class="chat bubble me">',
                        '<tpl else> class="chat bubble you"></tpl>',
                            '{message} <br> <div class="chat time">{[values.timestamp.toLocaleTimeString(navigator.language, {hour: "2-digit", minute:"2-digit"})]}</div>',
                    '</tpl>',
                '</div>',
                {
                    disableFormats: true,
                    isMyMessage(username){
                        return username == 'Me';
                    },
                    isDateSet(username){
                        return username == 'dateset';
                    }
                }
            ),
        }, 
        {
            xtype: 'container',
            layout: 'hbox',
    //      default focus is not working as expected
    //      defaultFocus: 'textfield[name=message]',
            items: [{
                xtype: 'textfield',
                flex: 1,
                margin: '0 10 0 0',
                placeholder: 'Send a Message',
                autoComplete: false,
                autoCorrect: false,
                listeners: {
                    added: 'focusTextField',
                    action: 'sendMessage'
                }
            },
            {
                xtype: 'button',
                ui: 'action round',
                height: 32,
                iconCls: 'x-fa fa-arrow-right',
                handler: 'sendMessage'
            }]
        }
    ] 

.chat {
    &.time {
        font-size: 12px;
        color: #494949;
    }
    &.bubble {
        font-size: 16px;
        position: relative;
        display: inline-block;
        clear: both;
        margin: 8px;
        //margin-bottom: 8px;
        padding: 13px 14px;
        vertical-align: top;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        word-wrap: break-word;
        width: 80%;
        height: auto;
        display: inline-block;
        &.you {
            float: left;
            color: #000000;
            background-color: $base-light-color;
            align-self: flex-start;
        }
        &.me {
            float: right;
            color: #000000;
            background-color: $accent-light-color;
            align-self: flex-end;
        }
    }
}

.conversation-start {
    position: relative;
    width: 100%;
    padding: 10px;
    margin-bottom: 3px;
    text-align: center;
    font-size: 14px;
    display: inline-block;
    color: #494949;
}

.chatbody {
    background-color: $faded-color;
}


.commmessageswindow {
        border: 1px solid $highlight-color;
        .x-panelheader {
                border: 0px;
        }
}