No multiple select ComboBox? Ok...

[ethraza]

If Jack wold like to support multiple select ComboBox in the 2.0 I wold like to suggest not to follow the html multiple select style of hold down ctrl/shift to do multiselect. I wold like to see a click to select/unselect aprouch.

In the mean time I need to do multi select, so I go for a overflow container with multiple CheckBoxes to archive the click to select/unselect style.

But I have faced a little problem that I have more or less solved in FF but not in IE.
All components in a form have a label property but a container is not a component so it don't have a label. I have not figured out how to put a simple text in forms so I'm unable to create a label to my multiselect container to integrate it in the layout with the other components.

What I did was create another checkbox outside the overflow container and used it label property (CNPJ). This Checkbox become hidden over the overflow container, so the label appers to pertence to the container. At least in FF, because in IE is possible to see this dammed checkbox and even to click it.

Some one know how to completely hide this checkbox or a smarter way to crate a label to my overflow container?

Here is the peace of my code where I create the first line (container) and where I do that with overflow container (C):


var myForm = new Ext.form.Form({
buttonAlign: 'right',
labelWidth: 70,
labelAlign: 'left',
baseParams: {sid:'$SID',rel:'$rel'},
url: 'relatorio_consulta_exec.php'
});

myForm.container(); // >L1

myForm.column({width:75}); // L1>C0
myForm.add(
new Ext.form.Checkbox({
fieldLabel: 'CNPJ'
})
);
myForm.end(); // L1<C0

myForm.column({width:675}); // L1>C1

myForm.add(
myForm.container({labelWidth:5,labelSeparator:'',style:'overflow:auto;height:60px;border:1px solid #ccc;margin:4px 15px 4px 0px;'})
); // >Cs
myForm.add(
new Ext.form.Checkbox({
boxLabel: '$user - $name',
tabIndex: tidx+=1,
checked: true,
name:'Cnpj_$user',
inputValue: '$user'
}),
$cnpjs
);
myForm.end(); // <Cs

myForm.end(); // L1<C1

myForm.column({width:'200px'}); // L1>C2

var data='$data';
myForm.add(
new Ext.form.DateField({
fieldLabel: 'Per&iacute;odo',
name:'DataViagem_inicio',
tabIndex:tidx+=1,
allowBlank:false,
selectOnFocus:true,
value:'01'+data.substr(2),
maskRe : /[\d\/]/ // only allow numbers and '/'
}),
new Ext.form.DateField({
labelSeparator: '',
name:'DataViagem_fim',
tabIndex:tidx+=1,
allowBlank:false,
selectOnFocus:true,
value:data,
maskRe : /[\d\/]/ // only allow numbers and '/'
}));
myForm.end(); // L1<C2

myForm.end(); // <L1

(...)
And a second question: (more easy I think)
How you can see in the screenshot, the form is aligned to the right. How to horizontally center the entire form keeping the labels and components right aligned?

Attached is a screenshot of that form in FF (with the checkbox hidden).

Thanks!

[ethraza]

As almost always, I only need to ask something on the forum to think in a way to resolve. At least the example stay to anyone with the same doubt.

To get the checkbox hidden the only requisite is to be type hidden! (autoCreate: {tag: "input", type: "hidden"}) wohhh :D
The label, that is what I really whant, keeps visible.

And to get the overflow container more integrated, I added the background of inputs to it, letting the style like this:
style:'overflow:auto;height:60px;border:1px solid #B5B8C8;margin:4px 10px 4px 0px;background: #FFFFFF url(inc/javascripts/ext/resources/images/default/form/text-bg.gif) repeat-x scroll;padding: 1px 3px;'}


But I'm steal looking for two things:

How to horizontally center the form or a container?

And how to get the horizontal scrool bar to not show up when vertical scrool appers? Because my right aligned form buttons are going a little off the screen when it happens. (ps. My forms are going inside the center of a layout that are inside a tabbed center of a 'master' layout, if it make any difference).

Any clue?

[ethraza]

In IE we have problens with css position, so to the Multiple Selection field to work correct cross-browser, the style need to have position:relative, ending like this:


myForm.container({labelWidth:0,labelSeparator:'',style:'position:relative;overflow:auto;height:60px;border:1px solid #B5B8C8;margin:4px 10px 4px 0px;background: #FFFFFF url(inc/javascripts/ext/resources/images/default/form/text-bg.gif) repeat-x scroll;padding: 1px 3px;'})
);