View Full Version : Best way to display a read only form?

23 Dec 2010, 7:58 AM
Looking at the various examples I did not really see one that looked to do what I wanted (of course I may have missed it).

Basically I want to display a form, similar to a fieldset, containing just read-only data. I don't really want to disable the fieldset as that is the wrong visual indicator.

Is there anything I should be reading besides scouring the example apps? The getting started example is not the kind of app I'm trying to build, so I've been mostly adapting code from Kitchen Sink. Would reading any of the ExtJS books available give me a good foundation? I realize they are not four Touch.

Thanks for any help, and Merry Christmas,

23 Dec 2010, 1:53 PM
I don't really want to disable the fieldset as that is the wrong visual indicator.

what do you want it to look like?

23 Dec 2010, 6:26 PM
Just like the fieldset in the kitchen sink example, but with the textfields being read only.

27 Dec 2010, 7:03 AM
Well, would still like to know if there's a "better" way, but I did find a way, namely, to override the renderTpl template and add the readonly text there.

So basically I create a template with all of the text from the iirc Field renderTpl and placed readonly after the class="{fieldCls}". Then when creating the fields in the fieldset I just set the renderTpl config option to my read only text field template. It's not slick, and there has to be a more javascript way to do it, but it does work. So once I actually get around to learning javascript I'll improve on it.

And I found the book Learning Ext.JS to be somewhat helpful.

27 Dec 2010, 1:40 PM
Glad you found my book helpful.

You should try disabling the fields in conjunction with setting a 'cls' on the field. That is what I have done to disable a field, but prevent it from getting grayed out.

For example:

xtype: 'textareafield',
cls: 'question',
disabled: true

And add the style:

.question textarea {
color: #000000;

4 Jan 2011, 5:03 PM
Interesting solution!
The problem is that it doesn't allow the user to scroll in the field value areas (right side of the form).

Is there a way to deactivate the event capture on those fields ?

4 Jan 2011, 6:28 PM
Stick with the read only template, no issues at all really.

1 Apr 2011, 12:17 PM
If you want your fields to be readOnly then all you have to do is set the readOnly config property to true. That should be that simple.

Now if you are dynamically making your fields readOnly (after they are rendered) depending on some logic, then you can do so like this:


In the documentation for Ext.Field there is a setReadOnly method but seems like it is not implemented. So either you just directly use the above code or implement the setReadOnly method using the same code above.

Hope this helps.

8 Aug 2011, 12:59 AM
xtype: 'textfield',
id: 'title',
label: 'title',
trackResetOnLoad: true,
listeners: {
afterrender: function(cmp){
this.setReadOnly(cmp, true);

setReadOnly: function(cmp, isReadOnly){
if(!cmp || !cmp.fieldEl){

cmp.fieldEl.dom.readOnly = isReadOnly;

8 Dec 2011, 4:14 PM
I just use:

xtype: 'textfield',
id: 'txtAddress',
cls: "detailText",
readOnly: true,
label: 'Address'