How to pass reference to form DOM objects into Ext.Panel objects?

[owiberg]

Hi,

I am implementing an on-screen keyboard which extends Ext.Panel with items that are Ext.Button's. I instantiate this KeyboardPanel within a PanelForm that also contains the form fields. I have a handler function for these buttons that needs to access the form field that last was in focus, i.e. the keyboardPanel needs a reference to the currentField. I also have an onFocus event handler for the text fields that should set the currentField property on the keyboardPanel object.

My main question is: How do I access the form field when the text field is in focus and how can I pass that reference to the KeyboardPanel so that it can append the text value to the field?

I know this should be easy to do as in jQuery I could just use $(currentField).get/setText(). Since I am new to Sencha Touch I am struggling with this basic concept. I tried using the Ext.get, Ext.getDom but those dont work from within my KeyboardPanel object. What is the preferred way to access DOM objects from anywhere in the code and to pass a references to these Dom objects?

[edspencer]

It depends a little on what your architecture is. I don't know how you've got things set up so far but let's say you have a form and a keyboard already:




var form = new Ext.form.FormPanel({
items: [
{
xtype: 'textfield',
listeners: {
focus: function(field) {
form.currentField = field;
}
}
}
]
});


var keyboard = new My.Keyboard({
listeners: {
keypress: function(key) {
var currentField = form.currentField;

currentField.setValue(currentField.getValue() + key);
}
}
});



The above assumes your virtual keyboard fires a keypress event whenever any button is pressed, but the principle would work with other architectures.