Text between form elements

[mattn]

Hello,

Can anybody explain me how I can place text between form elements?



new Ext.form.TextArea({
fieldLabel: 'Lezen',
name: 'lezen',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Schrijven',
name: 'schrijven',
grow: true,
preventScrollbars:true,
value: ''
})


between the 2 textareas I would like to put some text, but how do I do that?

thx for the help

[Nullity]

See this extension that I wrote, it should help you:
http://extjs.com/forum/showthread.php?t=6930

[mattn]

thx its just what I needed.

But where do I have to put the file? i get an error "f.clearInvalid is not a function" in the ext-all-debug.js file

[Nullity]

Paste it all into a new .js file, then source it on your page AFTER all the ext .js files. You'll also have to put the new css in your page too.

[mattn]

This is the include order I used



<link rel="stylesheet" href="extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="resources/miscfield.css" />

<script src="extjs/adapter/yui/yui-utilities.js"></script>
<script src="extjs/adapter/yui/ext-yui-adapter.js"></script>
<script src="extjs/ext-all-debug.js"></script>
<script src="resources/miscfield.js"></script>

<script src="js/4asv.js"></script>


In the file I use to build the form (4asv.js) I put



new Ext.form.MiscField({
fieldLabel: 'blaLabel',
id: 'miscfield',
width: 400,
value: '(blablabla)'
})


and I still get the next error



f.clearInvalid is not a function
clearInvalid(Object initialConfig=Object id=miscfield width=400)ext-all-debug.js (line 21758)
each(function(), undefined)ext-all-debug.js (line 5770)
clearInvalid()ext-all-debug.js (line 21757)
success(Object tId=1 status=200 statusText=OK)ext-all-debug.js (line 22161)
setProgId(Object conn=XMLHttpRequest tId=1, Object scope=Object timeout=30000, undefined)yui-utilities.js (line 15)
setProgId()yui-utilities.js (line 15)
[Break on this error] f.clearInvalid();


Any suggestions on how to solve it?

[Nullity]

When exactly do you get the error? Could you paste the code for your whole form? I've been playing with it, but I'm not getting any errors at all. If you could give me some details on how/when it happens, I can try to duplicate it.

Thanks.

[mattn]

The error happends when I open the page with the form

here is the code for the whole form.
I commented out the part that doesn't work
the problem is that it wil be hard to duplicate cause it juses a php generated xml page.
But you can test it
THX for the help

[CODE]
function getBgv(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var fs = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 200,

// configure how to read the XML Data
reader : new Ext.data.XmlReader({
record : 'leerling',
success: '@success'
}, [
{name: 'luisteren', mapping:'naam'},
{name: 'spreken', mapping:'voornaam'},
{name: 'lezen', mapping:'test'}
]),

});
/*
* ================ ASV =======================
*/
/*
* ================ Taalvaardigheden =======================
*/

fs.fieldset(
{legend:'Taalvaardigheden'},
new Ext.form.TextArea({
fieldLabel: 'Luisteren',
name: 'luisteren',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Spreken',
name: 'spreken',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Lezen',
name: 'lezen',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Schrijven',
name: 'schrijven',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Functionele taal <br />(bijv. solliciteren, opleidingswoordenschat, stage, ...) ',
name: 'funcTaal',
grow: true,
preventScrollbars:true,
value: ''
})
);

/*
* ================ Rekenvaardigheden =======================
*/
fs.fieldset(
{legend:'Rekenvaardigheden'},
new Ext.form.TextArea({
fieldLabel: 'Getallen - getallenbegrip',
name: 'getallenbegrip',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Basisrekenvaardigheden',
name: 'basisrekenvaardigheden',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Breuken',
name: 'breuken',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Meten - maateenheden',
name: 'maateenheden',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Toepassingen',
name: 'toepassingen',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Probleemoplossende vaardigheden',
name: 'probleemoplossen',
grow: true,
preventScrollbars:true,
value: ''
}),
new Ext.form.TextArea({
fieldLabel: 'Functioneel rekenen',
name: 'funcRekenen',
grow: true,
preventScrollbars:true,
value: ''
})/*,
new Ext.form.MiscField({
fieldLabel: 'MiscField',
id: 'miscfield',
width: 400,
value: '(tijds

[Nullity]

Ah, I found the problem. Try this:


/**
* @class Ext.form.MiscField
* @extends Ext.Component
* Base class to easily display simple text in the form layout.
* @constructor
* Creates a new MiscField Field
* @param {Object} config Configuration options
*/
Ext.form.MiscField = function(config){
Ext.form.MiscField.superclass.constructor.call(this, config);
};

Ext.extend(Ext.form.MiscField, Ext.Component, {
/**
* @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-field",

// private
isFormField : true,

/**
* Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
* @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element
* @return {Ext.form.MiscField} this
*/
applyTo : function(target){
this.target = target;
this.el = Ext.get(target);
this.render(this.el.dom.parentNode);
return this;
},

// private
onRender : function(ct){
if(this.el){
this.el = Ext.get(this.el);
if(!this.target){
ct.dom.appendChild(this.el.dom);
}
}else {
var cfg = this.getAutoCreate();
if(!cfg.name){
cfg.name = this.name || this.id;
}
this.el = ct.createChild(cfg);
}

this.el.addClass('x-form-miscfield');

if(!this.customSize && (this.width || this.height)){
this.setSize(this.width || "", this.height || "");
}
if(this.style){
this.el.applyStyles(this.style);
delete this.style;
}

this.el.addClass([this.fieldClass, this.cls]);
this.initValue();
},

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

// private
afterRender : function(){
this.initEvents();
},

/**
* Resets the current field value to the originally-loaded value
*/
reset : function(){
this.setRawValue(this.originalValue);
},

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

/**
* Sets the height and width of the field
* @param {Number} width The new field width in pixels
* @param {Number} height The new field height in pixels
*/
setSize : function(w, h){
if(!this.rendered || !this.el){
this.width = w;
this.height = h;
return;
}
if(w){
this.el.setWidth(w);
}
if(h){
this.el.setHeight(h);
}
var h = this.el.dom.offsetHeight; // force browser recalc
},

/**
* Validates the field value
* Always returns true, MiscField cannot be marked invalid
* Required for successful form submission
* @return True
*/
validate : function(){
return true;
},

/**
* Clear any invalid styles/messages for this field
* Empty function, MiscField cannot be marked invalid
* Required for certain form actions
*/
clearInvalid : function(){
return;
},

/**
* Returns the raw field value.
* @return {Mixed} value The field value
*/
getRawValue : function(){
return this.el.dom.innerHTML;
},

/**
* Returns the clean field value - plain text only, strips out HTML tags.
* @return {Mixed} value The field value
*/
getValue : function(){
var f = Ext.util.Format;
var v = f.trim(f.stripTags(this.getRawValue()));
return v;
},

/**
* Sets the raw field value.
* @param {Mixed} value The value to set
*/
setRawValue : function(v){
this.value = v;
if(this.rendered){
this.el.dom.innerHTML = v;
}
},

/**
* Sets the clean field value - plain text only, strips out HTML tags.
* @param {Mixed} value The value to set
*/
setValue : function(v){
var f = Ext.util.Format;
this.setRawValue(f.trim(f.stripTags(v)));
}
});


I had stripped out the 'clearInvalid' function because it wasn't needed for plain text. However, the 'form.load()' method requires it, so I added it back in, just empty.

Let me know how it goes.

[mattn]

Thx man this works great.
I just have found one more problem:
if you want to work over different lines, the text dissapears behind the next element or leaves the fieldset

see the example screenshots (2 times the same text)

http://forum.kouterkortrijk.be/layoutError1.jpg

http://forum.kouterkortrijk.be/layoutError2.jpg

[Nullity]

Ah, sorry about that, another small oversight. Here is some updated CSS to fix it...


.x-form-miscfield {
height: 22px;
line-height: 18px;
vertical-align: middle;
overflow: hidden;
}

This will cut off any text that wraps to new lines (which should be the desired behavior). To show all of the text, you can just pass a 'height' option to the field.

[mattn]

I tried it already (sorry I didn't mention it) but it won't work

[Nullity]

What won't work? The updated CSS? I tried it with the your code and it worked fine. What's happening?

[comm]

I tried it already (sorry I didn't mention it) but it won't work

Have you refresh or purge your cache after .css code update?
SOmetimes, simplest thing drive you crazy. :D

[linhluong]

Hi

I am getting an error that has to do with the el.dom properties

this.el has no properties
applyToMarkup(function())ext-all-debug.js (line 12320)
Component(Object fieldLabel=MiscField id=miscfield width=160)ext-all-debug.js (line 12176)
MiscField(Object fieldLabel=MiscField id=miscfield width=160)MiscField.js (line 11)
(no name)()nos1.js (line 35)
fire()ext-all-debug.js (line 1504)
onDocumentReady(setFormFieldTooltip(component), undefined, undefined)ext-all-debug.js (line 1711)
[Break on this error] this.render(this.el.dom.parentNode);

any ideas why?

L2