PDA

View Full Version : Show form fields as a label



Dave.Sanders
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() {
Ext.form.Field.superclass.initComponent.call(this);

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');
}

denkoo
18 Mar 2009, 9:24 PM
+1

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',
allowBlank:false
},{
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