PDA

View Full Version : Simple TextArea Question



Dustin Graham
2 Mar 2011, 1:34 AM
Ugh. I hate it when I get stuck for hours on something that is incredibly simple.

I have been away from JavaScript for a while.

I have done numerous Google Searches as well as searching for 5+ pages of the forums for "textarea" and similar things. So, forgive me if this is easy to find on search, I must have failed to put the correct search terms.

Creating a window...



layout: 'border',
items:[{
xtype: 'form',
border: false,
padding: 0,
layout:'fit',
keys: [{
key: [Ext.EventObject.ENTER],
handler: function() {
var chat = Ext.getCmp('chat-msg');
Ext.getCmp('chatbox').body.insertHtml('beforeEnd','You: ' + chat.getValue() + '<br />');
chat.setText('');
},
}],
items: [{
xtype: 'textarea',
name: 'chat-msg',
id: 'chat-msg',
}],
region:'south',
elements:'body',
height:40,
split:true
},{
autoScroll:true,
elements:'body',
region:'center',
id:'chatbox',
}],


So the above is what I think is relevant. It creates what I want, a blank area in center panel, with a full fit textarea in the south panel.

The handler works decently, when I press "enter" it adds "You: <your text>" to the top panel.

But, I can't figure out how to clear the text in the textarea box. I've tried setValue(''), reset(), setText(''), and tried searching... this is so simple yet I can't figure it out.

Also, I'm not sure if that's the most elegant way to get the chat inserted if there is feedback on that too.

Thanks.

Dustin Graham
2 Mar 2011, 1:34 AM
I'm pretty sure I clicked "Preview Post" and it appears to have posted it...

I am editing my first post. I am not done asking my question.

First post updated with my full question. Sorry about the double post.

Dustin Graham
2 Mar 2011, 2:29 PM
Not sure what's going on here, but I reorganized it a bit, and got it working. I think my solution was adding the scope: this, but I don't fully understand it yet.



layout: 'border',
items:[{
xtype: 'form',
border: false,
padding: 0,
layout:'fit',
keys: [{
key: [Ext.EventObject.ENTER],
handler: this.handleChat,
scope: this,
}],
items: [{
xtype: 'textarea',
name: 'chat-msg',
id: 'chat-msg',
}],
region:'south',
elements:'body',
height:40,
split:true
},{
autoScroll:true,
elements:'body',
region:'center',
id:'chatbox',
}],


And



handleChat: function(key, e) {
var chat = Ext.getCmp('chat-msg');
Ext.getCmp('chatbox').body.insertHtml('beforeEnd','You: ' + chat.getValue() + '<br />');
chat.setValue('');
e.stopEvent();
},


I guess I needed the scope for some strange reason... then after I created the scope and separate function it seemed to work. I was left with a newline which is why I added the e.stopEvent() which prevented the newline.

This is working nicely now.

Condor
3 Mar 2011, 12:44 AM
Can't be the scope. You're not use 'this' inside the handleChat method...