PDA

View Full Version : Form layout with multiple Radio/Checkbox?



Nullity
23 Apr 2007, 12:42 PM
I have a form currently laid out like the "Simple Form" in the Dynamic Forms example. I'm trying to add a new row that contains a single fieldLabel but multiple checkboxes or radio buttons. I have attached a image that shows a mock-up using standard html. How would I accomplish this using Ext? I don't see anything in the docs that would allow me to do this.

bendy
23 Apr 2007, 1:26 PM
Take a look at

http://extjs.com/forum/showthread.php?t=5086

and

http://extjs.com/forum/showthread.php?t=4602

Nullity
23 Apr 2007, 2:58 PM
Thanks! I'm not sure how I missed those.

Nullity
24 Apr 2007, 7:16 AM
Ok, now that that's figured out, how would I go about creating a column that contains only text? I tried a few things but none worked correctly, such as:


// produced a console error -
// it's looking for some sort of element to render, and simple text doesn't work
form.column({width: 220}, "text");

// The div is created and text is displayed, but 'column()' is still looking for a second argument,
// so the layout for the rest of the form gets messed up
form.column({
width: 220,
autoCreate: {tag: 'div', cls: 'x-form-ct x-form-column', style: 'width: 220px;', html: 'text'}
});


Also, is it possible to create a form row containing a label, but a blank field (not a field that is empty, but basically an empty div without a rendered element at all)?

Nullity
25 Apr 2007, 6:25 AM
I haven't found an answer to my questions, but I did find a work-around for this; and who knows, maybe it was the only way to solve it.

Inside the div where my form gets rendered I manually created another div, which I positioned and styled to make it look like the rest of the labels in the form; plus a second, blank div. Then I created my container like this:


form.container({el: Ext.get('some_div')});
Apparently, this forces the container to be placed within the passed element. This way, I was able to make it look like I created it just using the form class.

I just stumbled upon the while browsing through the forums here:
http://extjs.com/forum/showpost.php?p=25861&postcount=8

How would I have otherwise found this information? It is missing from the docs and I couldn't find any examples. I just happened to come across it accidentally. I usually try avoid searching through the source code unless it is my last option as it can sometimes be quite time consuming.