Button within Ext.form.Column

[ferr]

I need a button at a specific position within a form and form.addButton makes no sense for what I am trying to do.

Here is what the form, within a layoutdialog, currently looks like:
http://img145.imageshack.us/img145/6167/browsebuttongx3.png
Note the Browse button, I want it on the same line as the "File" text field. It is currently being added with form.addButton, which seems to lack the positioning functionality that I need.

The setup is like this:
LayoutDialog -> Form -> Columns -> [all of those fields]

It's apparent to me that you can't add an Ext.Button as a field in a column. I may be wrong about that (error I get: R.ownerDocument has no properties). I tried some weird things as well, such as adding a new FieldSet, new Form, new Column as a field in my columns, and within those objects I added the TextField and Button, but I could not find success..

The other method would be to create an instance of a button and just set the position in its style property, but no matter what approach I take in setting the position, it is not possible to do it properly (i.e. setting 'position:absolute top: 100px' would actually set it 100px from the top at all times, in other words, as you scroll, it follows you down).

[ferr]

I've been messing around with this Ext.form.TextField with Ext.Button on the same line problem and have yet to find an elegant solution. The closest thing I have had to getting it look the way I want is to use Element.insertHtml, which does allow me to dynamically insert data at the position that I want, BUT I am trying to insert an Ext.Button, and insertHtml only takes a parameter of HTML.. is there some level of conversion I am overlooking that I can use to get these two things compatible?

I have also tried out Element.insertAfter, which is nice except that it breaks the line with each insert, and I want it all on the same line.

Before messing with the Element, I thought I'd found a solution by creating an instance of a button, then positioning it relative within the form. This looked like I wanted it to in Firefox, but it was very buggy in IE6.. it would follow as I scrolled and when I clicked on the button, it would pop back up to the relative position I assigned it to. Even if it did work, however, I doubt I would go with this solution as it doesn't exactly accommodate dynamic instantiation of objects which is what this particular form will be utilizing.

[ferr]

This might be a bug:

formEditDocuments.findField("edit-doctype").getEl().insertHtml("afterEnd",
'<a href="javascript:HandleBtnReset()"><img src="Images/collapse.jpg"></a>',
false);

edit-doctype refers to an Ext.form.ComboBox and when I use insertHtml specifying "afterEnd" it actually inserts that html code after the text field of the combo box rather than after the combo box's button.. so it's: [Text Field For Combo Box]inserted html[Combo Box]

Quick JavaScript question, notice how I'm calling HandleBtnReset() within that href up there, the problem is that this function is defined within a .js file, and it definitely doesn't recognize it in its current format.. so how can I call a js function that is within a .js file like that?
edit: From what I've been able to google, there is no reason for HandleBtnReset() to not be called..

edit: err, I would have never guessed that Ext.form.TextField has a config option for inputType:'file'

[talshadar]

Have you tried to align the button to the textbox?


txtSearch = new Ext.form.MiscField({
fieldLabel:"File",
labelSeparator: "",
id: "FileSearch",
width:600,
value:"<input type=text id='txtFileInput' style='width:300px;' /><div id='browseSearchButtonDiv'></div>"
});

... (add to form and render the form)

txtFileEl = Ext.get("txtFileInput");
btnBrowse.el.alignTo(txtFileEl, "r", [2, -11]);


One of the projects I've worked on used the above to render a textbox field and align a button beside it. Now I don't know if it would work for you situation without you having to code everything behind the scenes instead of just using a inputType of "file" but I thought I'd put it out there just in case.

[Ye Yang]

The project I am working on has exactly same change request to align button and text field in the same line. I was looking at Internet for clues, however the suggestion solution did not suit to my case because significant code changes are required to accomodate this simple UI change. Eventually I got my solution. (I am using ExtJs 2.2).

Steps:
1. Define two ExtJs Components as Ext.TextField and Ext.Button
2. Define FormPanel with layout: 'table' and layoutConfig: '{columns: 2}'
for example, formPanel = new Ext.form.FormPanel({
border: false,
layout: 'table', //important
layoutConfig: '{columns: 2}',
items: [textfield, button]
}),
3. Define a Panel with items:
panel = new Ext.Panel({
....
layout: 'anchor',
items: [..formPanel, ...]
})


Hopefully this helps.