View Full Version : Show form fields as a label

18 Mar 2009, 10:01 AM
I don't know if this counts as an extension - since I don't have it packaged up as such - so let me know if I should move this thread.

I routinely need to display a form to a user and based on their permissions either give them Read / Write access or Read Only access. I wanted something quick and easy that could be set via a binary flag on a field. (Or via a defaults config.)

The code below does this via a "showAsLabel" property on the field object. If this property is true, then the field is rendered as just text. I have not fleshed it out for all field types yet, and it fits my current usage patterns - so it might not be all size fits all yet. If you disagree with how I did it, have a better way, or want to make it more generic or a proper extension, then please post it up. I'd like to know if I'm doing this the "wrong" way. :)

Ext.form.Field.prototype.initComponent = function() {

if (this.showAsLabel) {
this.defaultAutoCreate = { tag: "div" };
this.getRawValue = function() { return ""; };
this.onRender = function(ct, position) {
Ext.form.Field.superclass.onRender.call(this, ct, position);
if (!this.el) {
this.el = ct.createChild({ tag: "div", id: this.getId(), className: "x-form-item-div" }, position);
if (this.xtype == "checkbox") {
this.el.dom.innerHTML = this.checked ? "Yes" : "No";
} else {
this.el.dom.innerHTML = this.value ? Ext.util.Format.htmlEncode(this.value) : (this.html || '');
this.setValue = function(v) {
this.el.dom.innerHTML = v ? Ext.util.Format.htmlEncode(v) : '';
this.setSize = function() { return; }
this.initCheckEvents = function() { return; }

this.addEvents('focus', 'blur', 'specialkey', 'change', 'invalid', 'valid');

18 Mar 2009, 9:24 PM

I like your solution.... clever !

one problem... when I use your solution on exemple form/dynamic.js

items: [{
fieldLabel: 'First Name',
name: 'first',
value: 'yesy',
fieldLabel: 'Last Name',
name: 'last',
showAsLabel: true,
value: ''
xtype: 'checkbox',
fieldLabel: 'check',
showAsLabel: true,
name: 'test'
xtype: 'checkbox',
fieldLabel: 'checktrue',
showAsLabel: true,
checked: true,
name: 'test2'
fieldLabel: 'Company',
name: 'company'

all fields after checkbox disapear... no error report by firebug on FF3 and CHROME