PDA

View Full Version : [SOLVED] Text before and after form.Texfield



n01champion
17 Apr 2007, 12:44 PM
is there a way to put Text before and after Texfield when doing a form

this is what i tried... doesnt work




acctForm.column(
{width:200, labelWidth:75, labelSeparator:''},
new Ext.form.TextField({
fieldLabel: 'Renew Every',
boxLabel: 'Days', // suppose to be after text field
name: 'bill',
allowBlank:false,
width:50
})
);

mattsmith321
17 Apr 2007, 5:35 PM
this is what i tried... doesnt work

What does it do?

n01champion
18 Apr 2007, 5:47 AM
I want it to look like this

"Renew every [ textbox ] days."

tryanDLS
18 Apr 2007, 11:44 AM
boxLabel only applies to a Checkbox. To do what you want, I think you'd have to try and append a div/span to the html after the textfield's div container.

mattsmith321
18 Apr 2007, 3:06 PM
boxLabel only applies to a Checkbox. To do what you want, I think you'd have to try and append a div/span to the html after the textfield's div container.

You might try something something similar to:

el.wrap.createChild({tag:'span',html:'Your text'});

n01champion
19 Apr 2007, 5:17 AM
Here is the solution:

Apply an 'id' property to the textfield element
and then use the DomHelper to insertAfter element



acctForm.column(
{width:200, labelWidth:75, labelSeparator:''},
new Ext.form.TextField({
id:'renew',
fieldLabel: 'Renew Every',
name: 'renew',
allowBlank:false,
width:50
})
);

Ext.DomHelper.insertAfter('renew', {tag:'span', html:' Days'});




Simple

jerometam
17 Jun 2007, 10:38 PM
Here is the solution:

Apply an 'id' property to the textfield element
and then use the DomHelper to insertAfter element



acctForm.column(
{width:200, labelWidth:75, labelSeparator:''},
new Ext.form.TextField({
id:'renew',
fieldLabel: 'Renew Every',
name: 'renew',
allowBlank:false,
width:50
})
);

Ext.DomHelper.insertAfter('renew', {tag:'span', html:' Days'});




Simple

I've problem following your solution, here is my code:

I've a NumberField for USD, and I want to place the USD label after the input box, such that it would looks like: _________USD


var supp_toyr = new Ext.form.NumberField({
id: 'usd',
fieldLabel: 'T/O Year',
name: 'supp_toyr'
});


I place this before the form.render():



Ext.DomHelper.insertAfter('usd', {tag:'span', html:' USD'}, true);


but I recieved an error, and the FireBug console tells me:

el has no properties
insertHtml("afterend", null, "<span> USD</span>")ext-all-debug.js (line 221)
doInsert(null, Object tag=span html= USD, true, "afterEnd", "nextSibling")ext-all-debug.js (line 306)
insertAfter("usd", Object tag=span html= USD, true)

Could anybody give me an idea....

violinista
18 Jun 2007, 2:53 AM
Try to defer insertAfter statement for a while. Maybe a form is not rendered, and fireBug naturally throws an error.

tryanDLS
18 Jun 2007, 8:02 AM
You can't insert the element before the field render b/c it doesn't exist - there's nothing to insertAfter/Before yet.

jerometam
18 Jun 2007, 9:24 AM
You can't insert the element before the field render b/c it doesn't exist - there's nothing to insertAfter/Before yet.

You are my Hero!!

I've been scratching my head this whole morning, assumed that the form has to be rendered after putting the label elements!