PDA

View Full Version : Ext.ux.form.StaticTextField - easy way to display text labels which are postable



aparajita
16 Dec 2007, 7:25 PM
Hi,

First of all, I want to thank all the great members of this community who have contributed their code to extending and improving Ext.

I have made a variation on Nullity's MiscField (http://extjs.com/forum/showthread.php?t=6930) that makes it much easier to create text fields which are meant for static, non-editable text. You may be wondering why we need another class like this when we already have MiscField (http://extjs.com/forum/showthread.php?t=6930) and CustomContentField (http://extjs.com/forum/showthread.php?t=20933). The key differences are:

- The text is not stripped of HTML tags, so you can use formatted text without explicitly calling SetRawValue(), which means text loaded via BasicForm.load() will work correctly.

- If submitValue is set true in the config, a hidden form field is created that will send the raw field value when BasicForm.submit() is called. This is very useful when you have read-only values in a form that need to be displayed *and* submitted.

- Placed the class in the ux namespace where it belongs.

- Uses x-form-text as the base CSS class and then uses tweaks to properly align the text with the field label.

- Streamlined for use as a static text label, simpler to use than CustomContentField.

Here is an example of how to use the field:


var formPanel = new Ext.form.FormPanel({
labelWidth: 70,
bodyStyle: 'padding: 15px',
border: false,
url: 'myurl',

defaults: {
anchor: '-15',
xtype: 'statictextfield',
submitValue: true
},

items: [{
fieldLabel: 'From',
name: 'f_from',
value: String.format('"{0}" <{1}>', config.from_name, config.from_email)
// MiscField would strip <{1}>
// CustomContentField would require a call to Ext.util.Format.htmlEncode()
},
{
fieldLabel: 'To',
name: 'f_to',
value: String.format('"{0}" <{1}>', config.to_name, config.to_email)
},
{
fieldLabel: 'Subject',
name: 'subject',
value: config.subject,
submitValue: false
},
{
xtype: 'textarea',
fieldLabel: 'Message',
name: 'f_message',
msgTarget: 'under'
}
]
});


Here is the class code:


/**
* @class Ext.ux.form.StaticTextField
* @extends Ext.BoxComponent
* Base class to easily display static text in a form layout.
* @constructor
* Creates a new StaticTextField Field
* @param {Object} config Configuration options
* @author Based on MiscField by Nullity with modifications by Aparajita Fishman
*/
Ext.namespace('Ext.ux.form');

Ext.ux.form.StaticTextField = function(config){
this.name = config.name || config.id;
Ext.ux.form.StaticTextField.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.form.StaticTextField, Ext.BoxComponent, {
/**
* @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "div"})
*/
defaultAutoCreate : {tag: "div"},

/**
* @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
*/
fieldClass : "x-form-text",

// private
isFormField : true,

/**
* @cfg {Boolean} postValue True to create a hidden field that will post the field's value during a submit
*/
submitValue : false,

/**
* @cfg {Mixed} value A value to initialize this field with.
*/
value : undefined,

/**
* @cfg {Boolean} disableReset True to prevent this field from being reset when calling Ext.form.Form.reset()
*/
disableReset: false,

// private
field: null,

/**
* Returns the name attribute of the field if available
* @return {String} name The field name
*/
getName: function(){
return this.name;
},

// private
onRender : function(ct, position){
Ext.ux.form.StaticTextField.superclass.onRender.call(this, ct, position);
if(!this.el){
var cfg = this.getAutoCreate();
this.el = ct.createChild(cfg, position);

if (this.submitValue) {
this.field = ct.createChild({tag:'input', type:'hidden', name: this.getName(), id: ''}, position);
}
}

this.el.addClass([this.fieldClass, this.cls, 'ux-form-statictextfield']);
this.initValue();
},

// private
afterRender : function(ct, position){
Ext.ux.form.StaticTextField.superclass.afterRender.call(this);
this.initEvents();
},

// private
initValue : function(){
if(this.value !== undefined){
this.setValue(this.value);
}else if(this.el.dom.innerHTML.length > 0){
this.setValue(this.el.dom.innerHTML);
}
},

/**
* Returns true if this field has been changed since it was originally loaded.
*/
isDirty : function() {
return false;
},

/**
* Resets the current field value to the originally-loaded value
* @param {Boolean} force Force a reset even if the option disableReset is true
*/
reset : function(force){
if(!this.disableReset || force === true){
this.setValue(this.originalValue);
}
},

// private
initEvents : function(){
// reference to original value for reset
this.originalValue = this.getRawValue();
},

/**
* Returns whether or not the field value is currently valid
* Always returns true, not used in StaticTextField.
* @return {Boolean} True
*/
isValid : function(){
return true;
},

/**
* Validates the field value
* Always returns true, not used in StaticTextField. Required for Ext.form.Form.isValid()
* @return {Boolean} True
*/
validate : function(){
return true;
},

processValue : function(value){
return value;
},

// private
// Subclasses should provide the validation implementation by overriding this
validateValue : function(value){
return true;
},

/**
* Mark this field as invalid
* Not used in StaticTextField. Required for Ext.form.Form.markInvalid()
*/
markInvalid : function(){
return;
},

/**
* Clear any invalid styles/messages for this field
* Not used in StaticTextField. Required for Ext.form.Form.clearInvalid()
*/
clearInvalid : function(){
return;
},

/**
* Returns the raw field value.
* @return {Mixed} value The field value
*/
getRawValue : function(){
return (this.rendered) ? this.value : null;
},

/**
* Returns the clean field value.
* @return {String} value The field value
*/
getValue : function(){
return this.getRawValue();
},

/**
* Sets the raw field value. The display text is <strong>not</strong> HTML encoded.
* @param {Mixed} value The value to set
*/
setRawValue : function(v){
this.value = v;
if(this.rendered){
this.el.dom.innerHTML = v;
if(this.field){
this.field.dom.value = v;
}
}
},

/**
* Sets the field value. The display text is HTML encoded.
* @param {Mixed} value The value to set
*/
setValue : function(v){
this.value = v;
if(this.rendered){
this.el.dom.innerHTML = Ext.util.Format.htmlEncode(v);
if(this.field){
this.field.dom.value = v;
}
}
}
});

Ext.reg('statictextfield', Ext.ux.form.StaticTextField);

Here is the CSS that goes with it:


.ux-form-statictextfield {
background: transparent;
border: none;
padding-top: 2px !important;
padding-bottom: 2px !important;
color: #333;
}

Notice by default the text is slightly grayed, just override the color: #333 in your CSS to change that.

I hope you find this useful!

mash-morgan
18 Feb 2008, 10:59 AM
This works and its fantastic. Beats MiscField.

This should be part of the official Ext-2.02 - imho.

One bug though - in the example...
in the {defaults} bit

xtype: 'staticfieldtext'
should be
xtype: 'statictextfield',

aparajita
18 Feb 2008, 2:00 PM
Thanks for the feedback. At least _someone_ is using it other than me! I fixed the typo, thanks for pointing it out.

couetbis
20 Feb 2008, 6:16 AM
Hi,
I try but I have this error : this.el has no properties
It's compatible with ext 2.0 ?
Thanks

Condor
20 Feb 2008, 6:50 AM
It would be a nice feature if the use of htmlEncode could be configurable (that would also eliminate the difference between setRawValue and setValue).

aparajita
20 Feb 2008, 1:09 PM
Hi,
I try but I have this error : this.el has no properties
It's compatible with ext 2.0 ?

Yes, it was made for Ext 2.0. Are you using the fixed demo code? The default xtype should be 'statictextfield'. Try tracing through your code with FireBug to see where the error occurs.

aparajita
20 Feb 2008, 1:22 PM
It would be a nice feature if the use of htmlEncode could be configurable (that would also eliminate the difference between setRawValue and setValue).

setRawValue() is maintained as a non-html encoded form in case you want to set the value to text that is already html encoded. In the context of this widget, that is the difference between "raw" and "clean".

Since the purpose of this widget is to display static text, you always need it to be html encoded at some point or it won't display correctly.

Makor
27 Feb 2008, 3:18 PM
Help... I want to add buttons near some text fields to call some dialogs. I want change but dont khow how do it.



onRender : function(ct, position){
Ext.ux.form.StaticTextField.superclass.onRender.call(this, ct, position);
if(!this.el){
var cfg = this.getAutoCreate();
this.el = ct.createChild(cfg, position);

if (this.submitValue) {
this.field = ct.createChild({tag:'input', type:'hidden', name: this.getName(), id: ''}, position);
}
// ADDED
if (this.buttonAdd) {
console.log(ct.createChild({tag:'input', type:'button', name: this.getName(), id: ''}, position));
console.log(this.field);
}
// END ADDED
}

this.el.addClass([this.fieldClass, this.cls, 'ux-form-statictextfield']);
this.initValue();
},



Added part create button under text. how it show right?

Condor
27 Feb 2008, 11:05 PM
Help... I want to add buttons near some text fields to call some dialogs.

You should not modify field classes for that. Just use a column or table layout to put buttons next to a field, e.g.


new Ext.Viewport({
layout:'fit',
items:[{
xtype: 'form',
layout: 'column',
defaults: {
border: false,
layout: 'form'
},
items: [{
width: 250,
items: [{
xtype: 'statictextfield',
fieldLabel: 'Number',
value: 123
}]
},{
width: 50,
items: [{
xtype: 'button',
text: '+'
}]
},{
width: 50,
items: [{
xtype: 'button',
text: '-'
}]
}]
}]
});

Animal
28 Feb 2008, 12:44 AM
Forgive me if I've misunderstood things, but the purpose of this is to have a static piece of text on the screen which the user cannot focus upon and modify, but which is submitted back to the server?

Why not use s standard Ext.form.TextField but set its readOnly property to true?

Then you don't need a DIV to show the value, and a hidden field to hold the submittable value.

You can style the input field to remove borders, and make it look like any other static element.

Condor
28 Feb 2008, 4:04 AM
Why not use s standard Ext.form.TextField but set its readOnly property to true?

This is only true when you set submitValue to true. If you don't this component still has value.

And I still think that htmlEncode should be optional (then it could replace MiscField).

Animal
28 Feb 2008, 4:18 AM
If submitValue is false, just don't apply a name attribute to the DOM input element, or set it to disabled = true. As long as you explicitly style the input, then you should be OK.

Condor
28 Feb 2008, 5:01 AM
If submitValue is false, just don't apply a name attribute to the DOM input element, or set it to disabled = true. As long as you explicitly style the input, then you should be OK.

Yes, but then you would have an INPUT element in your DOM. AFAIK INPUT element are slower and take up more memory then DIVs.

Animal
28 Feb 2008, 5:43 AM
Something like:



Ext.ux.StaticTextField = Ext.extend(Ext.form.TextField, {
fieldClass: 'x-static-text-field',

onRender: function() {
this.readOnly = true;
this.disabled = !this.initialConfig.submitValue;
Ext.ux.StaticTextField.superclass.onRender.apply(this, arguments);
}
});


And CSS:



input.x-static-text-field {
background: transparent;
border: none;
color: inherit;
-moz-opacity: 1;
opacity: 1;
filter: alpha(opacity=100);
}

Makor
28 Feb 2008, 6:19 AM
You should not modify field classes for that. Just use a column or table layout to put buttons next to a field, e.g.


new Ext.Viewport({
layout:'fit',
items:[{
xtype: 'form',
layout: 'column',
defaults: {
border: false,
layout: 'form'
},
items: [{
width: 250,
items: [{
xtype: 'statictextfield',
fieldLabel: 'Number',
value: 123
}]
},{
width: 50,
items: [{
xtype: 'button',
text: '+'
}]
},{
width: 50,
items: [{
xtype: 'button',
text: '-'
}]
}]
}]
});

may be its more right, but i want to add one or two buttons in exist form without it global reconstraction. And this method generate more code, that make code harder

kusoft.net
5 Mar 2008, 5:46 PM
I create formpanel with miscfield and layout absolute, found it right images position move to left.
who help me?
http://extjs.com/forum/attachment.php?attachmentid=5143&stc=1&d=1204768002

mystix
5 Mar 2008, 6:03 PM
I create formpanel with miscfield and layout absolute, found it right images position move to left.
who help me?
http://extjs.com/forum/attachment.php?attachmentid=5143&stc=1&d=1204768002

are you using this plugin?

if you are, please post some sample code.
if you aren't, it would be more appropriate for you to post in the 2.0 Help Forum (http://extjs.com/forum/forumdisplay.php?f=9) instead.

pludikhu
30 Mar 2008, 4:26 AM
Hi aparajita

Thank you for this nice extension.
Not sure if I'm using it for it's intended purpose, but I just wanted some text information between the form fields in the panel. It doesn't need to be sent to the server at submit.

But I wanted to give some html tags in my text, therefore I slightly altered your initValue code as follows:


...
// private
initValue : function(){
if(this.value !== undefined){
this.setValue(this.value);
}else if(this.el.dom.innerHTML.length > 0){
this.setValue(this.el.dom.innerHTML);
}
if(this.rawvalue !== undefined){
this.setRawValue(this.rawvalue);
}else if(this.el.dom.innerHTML.length > 0){
this.setRawValue(this.el.dom.innerHTML);
}
},
...


The only thing I need now is to add my text as an xtype 'statictextfield':


...
{xtype: 'statictextfield', autoHeight:true, submitValue: false, hideLabel:true, rawvalue:'<center><b>WARNING!</b><br />Data you enter here will be seen by everyone!</center>'},
...


Therefore: thank you!

Patrick
(Unless you now say there's an easier way to do this :">)

ryba
31 Mar 2008, 1:34 AM
I have a question.

If I want to create a hyperlink on the form (for example: - login form with hyper link - if ouy forgot password click here)

what I should use ?

Janusz

rtconner
24 Jun 2008, 2:43 PM
pludikhu, below is a slightly improved version for you. (and I changed it to rawValue instead of rawvalue)


// private
initValue : function(){
if(this.value !== undefined){
this.setValue(this.value);
} else if(this.rawValue !== undefined){
this.setRawValue(this.rawValue);
} else if(this.el.dom.innerHTML.length > 0){
this.setValue(this.el.dom.innerHTML);
}
},

ryba, you should really ask that question in the help forums. But as I assume many looking for similar solution will end up in this thread, lets see if we can find an answer.
but likely something like

{xtype:'box', autoEl: {tag:'a', html:'my link text', href:'http://url.com'}}

Dave.Sanders
24 Jul 2008, 7:20 AM
Here are my 2 cents on functionality like this:

I think this really needs to be on Ext.Field and able to be used on every field type. Fields need to have a property like "showAsLabel" or something that takes whatever the field is and renders it as text in that location.

Reason for my case: I want to have a form that is normally in "read only" mode and displays the labels / values in a table format, but just as pure text. Then if the user clicks a button, I want to enable editing and show them an actual form. I don't want to just use Read Only's because I don't want to show the boxes, and I don't want to use a different type altogether because in my case I'm generating the extjs configs from another language. (.NET) I'd rather set a property true / false than have to swap out the actual control type I want to use.

I'm going to play around with extending field to do this, but just voicing a wish of mine. :)

mystix
24 Jul 2008, 7:52 AM
doesn't this do the job already?
http://extjs.com/docs/?class=Ext.form.Label

Dave.Sanders
24 Jul 2008, 11:24 AM
No, because its a different type - not a property on the field.

Dave.Sanders
24 Jul 2008, 12:06 PM
Here's one example on how to implement it the way that I want / need it to work. I don't see any reason why this couldn't be included directly into ext, with cleanup and proper inclusion into the code. (i.e. not have two nested Divs after the label when one Div could do - I didn't feel like messing with the template. Haven't tested this with all types that inherit from field, but it works for the basic textbox at least.

This all assumes you set a property called "showAsLabel:true" on your field.



Ext.form.Field.prototype.initComponent = function() {
Ext.form.Field.superclass.initComponent.call(this);

if (this.showAsLabel) {
this.defaultAutoCreate = { tag: "div" };
}

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

Ext.form.Field.prototype.setValue = function(v) {
this.value = v;
if (this.showAsLabel) {
this.el.dom.innerHTML = (v === null || v === undefined ? '' : v);
this.el.dom.className = "x-form-item-div";
}
else if (this.rendered) {
this.el.dom.value = (v === null || v === undefined ? '' : v);
this.validate();
}
}


And one fix in the CSS - which may be able to be done a different way, but this was quick and dirty:


.x-form-item-div { padding-top:3px; }

hAmpzter
20 Aug 2008, 5:47 AM
showAsLabel:true
That's a nice suggestion, though your code didn't at all work when I tried to use it (though on an complex form).

So I used the nice StaticTextField instead.. Though I'm using a date in one field and wanted the possibility to format the date, so I added "dateFormat" to the original code;

/**
* @class Ext.ux.form.StaticTextField
* @extends Ext.BoxComponent
* Base class to easily display static text in a form layout.
* @constructor
* Creates a new StaticTextField Field
* @param {Object} config Configuration options
* @author Based on MiscField by Nullity with modifications by Aparajita Fishman and Jonas Skoogh
*/
Ext.ns('Ext.ux.form');

Ext.ux.form.StaticTextField = function(config){
this.name = config.name || config.id;
Ext.ux.form.StaticTextField.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.form.StaticTextField, Ext.BoxComponent, {
/**
* @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "div"})
*/
defaultAutoCreate : {tag: "div"},

/**
* @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
*/
fieldClass : "x-form-text",

// private
isFormField : true,

/**
* @cfg {Boolean} postValue True to create a hidden field that will post the field's value during a submit
*/
submitValue : false,

/**
* @cfg {Mixed} value A value to initialize this field with.
*/
value : undefined,

/**
* @cfg {DateFormat} format of date if value is date.
*/
dateFormat : undefined,

/**
* @cfg {Boolean} disableReset True to prevent this field from being reset when calling Ext.form.Form.reset()
*/
disableReset: false,

// private
field: null,

/**
* Returns the name attribute of the field if available
* @return {String} name The field name
*/
getName: function(){
return this.name;
},

// private
onRender : function(ct, position){
Ext.ux.form.StaticTextField.superclass.onRender.call(this, ct, position);
if(!this.el){
var cfg = this.getAutoCreate();
this.el = ct.createChild(cfg, position);

if (this.submitValue) {
this.field = ct.createChild({tag:'input', type:'hidden', name: this.getName(), id: ''}, position);
}
}

this.el.addClass([this.fieldClass, this.cls, 'ux-form-statictextfield']);
this.initValue();
},

// private
afterRender : function(ct, position){
Ext.ux.form.StaticTextField.superclass.afterRender.call(this);
this.initEvents();
},

// private
initValue : function(){
if(this.value !== undefined){
this.setValue(this.value);
}else if(this.el.dom.innerHTML.length > 0){
this.setValue(this.el.dom.innerHTML);
}
},

/**
* Returns true if this field has been changed since it was originally loaded.
*/
isDirty : function() {
return false;
},

/**
* Resets the current field value to the originally-loaded value
* @param {Boolean} force Force a reset even if the option disableReset is true
*/
reset : function(force){
if(!this.disableReset || force === true){
this.setValue(this.originalValue);
}
},

// private
initEvents : function(){
// reference to original value for reset
this.originalValue = this.getRawValue();
},

/**
* Returns whether or not the field value is currently valid
* Always returns true, not used in StaticTextField.
* @return {Boolean} True
*/
isValid : function(){
return true;
},

/**
* Validates the field value
* Always returns true, not used in StaticTextField. Required for Ext.form.Form.isValid()
* @return {Boolean} True
*/
validate : function(){
return true;
},

processValue : function(value){
return value;
},

// private
// Subclasses should provide the validation implementation by overriding this
validateValue : function(value){
return true;
},

/**
* Mark this field as invalid
* Not used in StaticTextField. Required for Ext.form.Form.markInvalid()
*/
markInvalid : function(){
return;
},

/**
* Clear any invalid styles/messages for this field
* Not used in StaticTextField. Required for Ext.form.Form.clearInvalid()
*/
clearInvalid : function(){
return;
},

/**
* Returns the raw field value.
* @return {Mixed} value The field value
*/
getRawValue : function(){
return (this.rendered) ? this.value : null;
},

/**
* Returns the clean field value.
* @return {String} value The field value
*/
getValue : function(){
return this.getRawValue();
},

/**
* Sets the raw field value. The display text is <strong>not</strong> HTML encoded.
* @param {Mixed} value The value to set
*/
setRawValue : function(v){
this.value = v;
if(this.rendered){
if(Ext.isDate(v) && this.dateFormat){
this.el.dom.innerHTML = v.format(this.dateFormat);
}
else {
this.el.dom.innerHTML = v;
}
if(this.field){
this.field.dom.value = v;
}
}
},

/**
* Sets the field value. The display text is HTML encoded.
* @param {Mixed} value The value to set
*/
setValue : function(v){
this.value = v;
if(this.rendered){
if(Ext.isDate(v) && this.dateFormat){
this.el.dom.innerHTML = Ext.util.Format.htmlEncode(v.format(this.dateFormat));
}
else {
this.el.dom.innerHTML = Ext.util.Format.htmlEncode(v);
}
if(this.field){
this.field.dom.value = v;
}
}
}
});

Ext.reg('statictextfield', Ext.ux.form.StaticTextField);

dearsina
1 Oct 2008, 3:01 PM
Something like:



Ext.ux.StaticTextField = Ext.extend(Ext.form.TextField, {
fieldClass: 'x-static-text-field',

onRender: function() {
this.readOnly = true;
this.disabled = !this.initialConfig.submitValue;
Ext.ux.StaticTextField.superclass.onRender.apply(this, arguments);
}
});


And CSS:



input.x-static-text-field {
background: transparent;
border: none;
color: inherit;
-moz-opacity: 1;
opacity: 1;
filter: alpha(opacity=100);
}


That did the trick for me. Not too concerned with INPUT v DIV overhead, rather have a very small extension. Thanks, Animal!

vitolini
11 Oct 2008, 1:54 AM
Thanks for the extension, it works great! I only have one problem... I have a newline character in my variable but it simply omits it and shows everything in one single line. I can't get it to print the new line character. What am i missing?

Thanks,

Vito

Condor
11 Oct 2008, 3:05 AM
StaticTextField shows HTML, so newline characters are rendered as whitespace.

You should convert the value using Ext.util.Format.nl2br() before setting the value.

vitolini
11 Oct 2008, 10:42 AM
that fixes it, thx

StaticTextField shows HTML, so newline characters are rendered as whitespace.

You should convert the value using Ext.util.Format.nl2br() before setting the value.

skaue
21 Oct 2008, 4:32 AM
what is latest version of this?
I see the commented fixes arent in the initial post... :)

soze
6 Nov 2008, 8:05 AM
Something like:



Ext.ux.StaticTextField = Ext.extend(Ext.form.TextField, {
fieldClass: 'x-static-text-field',

onRender: function() {
this.readOnly = true;
this.disabled = !this.initialConfig.submitValue;
Ext.ux.StaticTextField.superclass.onRender.apply(this, arguments);
}
});


And CSS:



input.x-static-text-field {
background: transparent;
border: none;
color: inherit;
-moz-opacity: 1;
opacity: 1;
filter: alpha(opacity=100);
}

I've implemented Animal's suggestion and it immediately achieves the desired effect. This has opened my eyes the power of extending the current functionality quite easily.

Thanks Animal!

Remy
1 Dec 2008, 9:01 AM
Something like:



Ext.ux.StaticTextField = Ext.extend(Ext.form.TextField, {
fieldClass: 'x-static-text-field',

onRender: function() {
this.readOnly = true;
this.disabled = !this.initialConfig.submitValue;
Ext.ux.StaticTextField.superclass.onRender.apply(this, arguments);
}
});


And CSS:



input.x-static-text-field {
background: transparent;
border: none;
color: inherit;
-moz-opacity: 1;
opacity: 1;
filter: alpha(opacity=100);
}
Very neat solution Animal =D>

bhaidaya
11 Feb 2009, 7:40 AM
Awesome Animal. Was doing something similar but not as well rounded.

I would consider adding a 'grow: true' or anchor: 'x%' incase the fieldvalue is too long and gets cut off.



Ext.ux.StaticTextField = Ext.extend(Ext.form.TextField, {
fieldClass: 'x-static-text-field',
grow: true,

onRender: function() {
this.readOnly = true;
this.disabled = !this.initialConfig.submitValue;
Ext.ux.StaticTextField.superclass.onRender.apply(this, arguments);
}
});

giovanni
19 Feb 2009, 9:26 AM
This works great however I'm loading the form from an xml file that has html in it (don't ask me why they did it like that).

How would I go about getting the html to display instead of showing as tags?

Condor
19 Feb 2009, 10:37 AM
You need to use setRawValue instead of setValue (or modify setValue, so it doesn't do a Ext.util.Format.htmlEncode)

sarathy
24 Mar 2009, 5:51 AM
Hi Animal,

I used your approach to create readonly fields for my forum. However, the code below works differently in IE 6, 7 and FF when a long input field is part of the form.

In IE 6, field 1 shows no data and there is blank line between field 1 and field 2.
In IE 7, field 1 data is shown in a new line below where field1 data would have been rendered.
In FireFox, field1 data is correctly display next to field1 label.

If I remove the height and width then this works on all three browsers just fine. However, this panel is part of the border layout and I need to control its width and height.

Any help would be much appreicated.
-sarathy



Ext.ux.StaticTextField = Ext.extend(Ext.form.TextField, {
fieldClass: 'x-static-text-field',
grow: true,
anchor: '100%',
onRender: function() {
this.readOnly = true;
//this.disabled = !this.initialConfig.submitValue;
Ext.ux.StaticTextField.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('statictextfield', Ext.ux.StaticTextField);
Ext.onReady(function() {
Ext.namespace('MyNameSpace');
MyNameSpace.infoPanel = new Ext.FormPanel({
id: 'item-form',
renderTo: "center",
xtype: 'fieldset',
labelWidth: 110,
title: 'Info Panel',
height: 100,
width: 260,
defaults: {
width: 260
},
defaultType: 'statictextfield',
bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;': 'padding:10px 15px;',
border: false,
margins: '0 0 0 0',
autoScroll: true,
items: [{
fieldLabel: 'field1',
name: 'field1',
labelStyle: 'font-weight: bold;text-align: right;',
readOnly: true,
id: 'myboxcomponent'
},
{
fieldLabel: 'field2',
name: 'field2',
labelStyle: 'font-weight: bold;text-align: right;',
readOnly: true,
id: 'myboxcomponent2'
}]
});
var logRecord = Ext.data.Record.create([{
name: 'field1',
type: 'string'
},
{
name: 'field2',
type: 'string'
}]);
var n = new logRecord({
field1: '012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789',
//field1: '01234567890123456789012345678901234567890123456',
field2: 'second field'
});
MyNameSpace.infoPanel.getForm().loadRecord(n);
});

kulmegil
17 Apr 2009, 4:01 AM
This may be obvious to some but I would like to clarify on what license is Ext.us.form.StaticTextField?

berend
6 Jul 2009, 12:55 AM
Something like:



Ext.ux.StaticTextField = Ext.extend(Ext.form.TextField, {
fieldClass: 'x-static-text-field',

onRender: function() {
this.readOnly = true;
this.disabled = !this.initialConfig.submitValue;
Ext.ux.StaticTextField.superclass.onRender.apply(this, arguments);
}
});


Just tried this. But it is not a good solution, as it looks like text, but it isn't. When you try to select text with the mouse for example, it doesn't work (FF 3.1 on Linux). It's much better to have HTML text it looks like, so I'm now trying the solution posted here.