Listeners on rallytextfield - rally

Question

I would like to grab the text value from the input text field "workItemTextField" but I can't get the keypress event to fire with the below code.
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
_onWorkItemKeyPress: function() {
console.log('In _onWorkItemKeyPress');
console.log(this);
},
launch: function() {
this.add({
title: 'Time Entry',
width: 800,
padding: 10,
bodyPadding: 10,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'bottom'
},
items: [
{
xtype: 'rallytextfield',
itemId: 'workItemTextField',
fieldLabel: 'Work Item ID',
labelAlign: 'top',
listeners: {
scope: this,
keypress: this._onWorkItemKeyPress
}
}]
});
}
});
I was able to get it to fire replacing the listener with this:
listeners: {
keypress: {
element: 'el',
fn: this._onWorkItemKeyPress
}
}
But it doesn't return what I would expect. "this" is the textfield, but I can't call getValue() on it, and the attributes I would expect to be passed in (from looking at the api) are not what I would expect. The first arg is the event, 2nd not sure, and 3rd is the html element.
I am using apps/2.0rc3/sdk.js. I have looked at all the code I can find online and it looks like I am foing this correctly, but there must be something I am missing. What an I doing wrong?

Answer 1

I can get the value of the rallytextfield by using specialkey set to wait for ENTER, and then calling _onWorkItemKeyPress(field). field.getValue() works in this case. Unless your goal is not to get the complete value entered by the user, it is better not to use keypress and wait until the user indicated that they are done typing.
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items:{ html:'App SDK 2.0rc3 Docs'},
launch: function() {
var that = this;
that.add({
title: 'My Text',
itemId:'mytext',
width: 800,
padding: 10,
bodyPadding: 10,
layout: {
type: 'vbox',
align: 'bottom'
},
items: [
{
xtype: 'rallytextfield',
itemId: 'workItemTextField',
fieldLabel: 'Work Item ID',
labelAlign: 'top',
listeners: {
specialkey: function(field, e){
// e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
// e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
if (e.getKey() == e.ENTER) {
that._onWorkItemKeyPress(field);
}
else{
console.log('?');
}
}
}
}]
});
},
_onWorkItemKeyPress:function(field){
console.log('value:',field.getValue());
}
});