Building a display-only form with buttons for fields

[DaveC426913]

The form has some great features including labels and tabular format, etc. which I'd like to take advantage of. But I want my Items Details (Name, Dept, Qty, Notes) page to be read-only with hotspots.

Clicking on an individual field (say, Name) will pull up a new screen with a keyboard to edit that field, which you then save. (The reason we need a new screen is that the virtual keyboard takes up most of the screen, so one field at-a-time editing.)

I could simply disable every field, but they need to be actively tappable to open the edit.
Alternately, I could use buttons on my form instead of text components, but then I lose all the nice labelling and tabling.

Is there any way of taking advantage of the features of a form but making the fields at-once non-editable yet active buttons?

[DaveC426913]

Trying to add a 'click' listener to my field:



{
xtype: 'textfield',
id: 'ItemDetailName',
name : 'ItemDetailName',
label: 'Item name',

}

Ext.getCmp("ItemDetailName").addListener('click',this.foo);
console.log(Ext.getCmp("ItemDetailName"));
},

foo: function(){alert("!")},




It's there; it shows up in the object.



click: object
> listeners: Array[1]
> 0: Object
> fireFn: function(){alert("!")}
> fn: function(){alert("!")}

But it doesn't fire.