View Full Version : Chat-style Panel: Best way to update the conversation area?

12 Oct 2011, 7:27 AM
Hi guys,

I'm developing a messenger-like chat system. I have a window with this items:

initComponent: function() { this.items = [{
id: 'this-is-the-conversation-panel!!!',
region: 'center',
padding: 5,
bodyStyle: 'padding: 5px',
autoScroll: true
}, {
region: 'south',
height: 145,
padding: 5,
layout: 'hbox',
items: [{
xtype: 'htmleditor',
height: 135,
flex: 1,
fieldType: 'message'
}, {
xtype: 'button',
text: 'Send',
width: 80,
height: '100%',
handler: this.onSendMessageButtonClick,
scope: this


Now, I want to update the conversation panel with the new messages that are sent in the conversation. Which would be the best way for this? I could directly update the html of the panel, but I still haven't found a way to get the actual content of it. I know that I can do:


But this would, indeed, erase the original content of the panel. I haven't found a way in the API to access the original content and do something like:

myConversationPanel.update(myConversationPanel.getContent() + newMessageHtml);

With that code I could make it work. Does someone know how to access the original content of the panel? or is there a better way to handle this? maybe with one Ext.core.Element for each message?

Thanks in advance.

12 Oct 2011, 7:31 AM
Mmm.. or maybe I could use a Ext.view.View to display the messages? I didn't use it yet, but looking at the examples it looks like a good way to handle this.

What do you think?