View Full Version : personalized form element positioning

29 May 2007, 7:06 AM
is there a way for example to position the second textfield in side the first one :

new Ext.form.TextField({
fieldLabel: 'Id',
id: 'id',
name: 'id',
new Ext.form.TextField({
fieldLabel: 'Name',
id: 'name',
name: 'name',

thanks in advance

29 May 2007, 7:21 AM
What do you mean by "inside the textfield"? You can position something inside a div element, but you cannot position anything inside an input (which TextField is) element.

29 May 2007, 8:03 AM
hi liggett78
i want to have the two textfields in the same line (not the second in the bottom of the first)

i'm also seeking for a tip (perhaps using DomHelper) to insert a hr tag before form buttons
(i don't know first button id to use DomHelper.insertBefore('description', {tag: 'hr'});)


29 May 2007, 8:44 AM
Well, the default template for form elements (see Layout.js) is to render a TextField inside a div container, which means you're not able to place 2 TextFields in one line. You could override the template, but I have no idea what are the consequences. You have to digg into the source code to find out.

The alternative would be to create the markup manually and apply TextFields or Buttons to all your input elements step by step (without Ext.form.Form), but you loose some of the form functionality like submit etc.

29 May 2007, 9:04 AM
You could put the fields in 2 Form columns like the example.

30 May 2007, 2:54 AM
actually, i already have the two columns... it's not the second textfield that i want to position but rather a small button (i'm using this extra button http://extjs.com/forum/showthread.php?t=6099 ) at the right of the first textfield (or a combobox)...
it seems to be difficult using template solution so i think that i will be satisfied with the default layout.
thanks any way

NB: any tip to put my hr before the form bottom buttons line ?
or is it possible to put my two columns into a fieldset ?

30 May 2007, 7:16 AM
You probably do both things by modifying the CSS. You could float the elements left to get something else on the line. You could inject the hr the same way the dynamic example adds img tag for the photo. Or, you could probably modify the css of the button's container to add a top border.