Multi Select

[justheatingup]

Getting more involved in the form api, and I noticed there's no Multi Select option for a select element.

This is critical to a few of out applications. Are there plans for this soon?

[jack.slocum]

It's not on the list but I have already though of a solution for that, checkbox lists, radio groups, etc. They all need a similar api. In the meantime, you could always pass in an existing element or an autoCreate config to Ext.field.Field but you wouldn't be able to use the standard api.

[justheatingup]

It's not on the list but I have already though of a solution for that, checkbox lists, radio groups, etc. They all need a similar api. In the meantime, you could always pass in an existing element or an autoCreate config to Ext.field.Field but you wouldn't be able to use the standard api.

I read a post Jeff made suggesting check boxes as an alternative. I agree completely as long as you have the real estate.

Thanks for keeping this in your thoughts.

[brian.moeskau]

I (personally) like a checkbox list that overflows auto much better than a select list. Most non-technical people have no clue about holding down ctrl/shift for multi-selection. With overflow auto on the list container, real estate should be a non-issue.

[MrKurt]

I like multiple checkboxes as well, provided there's a quick way to select all/none.

[JeffHowden]

Brian, I completely agree on checkboxes w/ overflow:auto instead of multi-select lists.

[justheatingup]

We got the combox paradigm working:



filter.fieldset({
legend: filterParms[i].data.fieldLabel,
style: "margin-right:10px;",
hideLabels: true
});
for (var j = 0; j < filterParms[i].data.checkList.length; j++) {
filter.add(new Ext.form.Checkbox({
boxLabel: filterParms[i].data.checkList[j][0],
checked: filterParms[i].data.checkList[j][1],
name: filterParms[i].data.name,
inputValue: filterParms[i].data.checkList[j][0]
}));
}
filter.end();



How do we get them in a DIV with the overflow??

[brian.moeskau]

Creating the form dynamically, you'd probably want to do something like the following:



var fs = filter.fieldset({
legend: filterParms[i].data.fieldLabel,
style: "margin-right:10px;",
hideLabels: true
});
filter.end().render(); //EDIT - added this

fs.getEl().createChild({
tag: 'div',
id: 'cb-list',
// use a class instead!
style:'border:1px solid #B5B8C8;height:100px;overflow:auto;'
});
for (var j = 0; j < filterParms[i].data.checkList.length; j++) {
new Ext.form.Checkbox({
boxLabel: filterParms[i].data.checkList[j][0],
checked: filterParms[i].data.checkList[j][1],
name: filterParms[i].data.name,
inputValue: filterParms[i].data.checkList[j][0]
}).render('cb-list');
}

[justheatingup]

Creating the form dynamically, you'd probably want to do something like the following:


fs.getEl().createChild({
tag: 'div',
id: 'cb-list',
// use a class instead!
style:'border:1px solid #B5B8C8;height:100px;overflow:auto;'
});
}


Nope, getEl() doesn't work. I assume because we haven't rendered the form. this all needs to happen prior to it's rendering.

[brian.moeskau]

Yeah, I meant to add that the form should be rendered before the last part. Is there any reason you can't do that? Take a look at the dynamic example forms, and see how #4 adds the photo. That's very similar to what I did above. In general, it's relatively easy to render the basic form first, then inject any custom stuff into it as needed. After the render, you can pretty much add anything you want -- the form add API really gives an easy shortcut to doing all the standard layout for you, but you should not limit yourself to it.

[jack.slocum]

Hey Abe,

You should be able to just open a container:


filter.fieldset({
legend: filterParms[i].data.fieldLabel,
style: "margin-right:10px;",
hideLabels: true
});
filter.container({style:'overflow:auto;height:100px;'});

for (var j = 0; j < filterParms[i].data.checkList.length; j++) {
filter.add(new Ext.form.Checkbox({
boxLabel: filterParms[i].data.checkList[j][0],
checked: filterParms[i].data.checkList[j][1],
name: filterParms[i].data.name,
inputValue: filterParms[i].data.checkList[j][0]
}));
}
filter.end();
filter.end();

Preferably, you would do the overflow in CSS by changing the container above to:


filter.container({cls:'check-list'});

and adding this CSS somewhere:


.check-list{
overflow:auto;
height:100px;
border:1px solid #ccc;
}

[justheatingup]

filter.container({style:'overflow:auto;height:100px;'});


Work perfectly with one exception I had to pass the hideLabels:true AND for IE to properly scroll position:relative




filter.container({hideLabels:true, style:'overflow:auto;position:relative;height:100px;'});

[q_no]

Hi,

I have that problem too, that I really need a multi-select box for our project @ work. I looked at your suggested "work-around" but I can't see the point how to integrate a fieldset into an existing form and how to pass an array of values.

Can someone point me into the right direction or perhaps provide a short example how to do it with myform.add() ?

Any help appreciated! :-/

[jack.slocum]

Did you try the code above?

[q_no]

of couse I did :) In the meantime I got it working for about 80% :)

I have a div with scrollbars, checkboxes and so on... but it looks like this:



EditForm.container({style:'overflow:auto;height:100px;width:400px;border:1px solid red;'});
EditForm.add(new Ext.form.Checkbox({
id:Ext.id(),
boxLabel: 'links',
checked: false,
name: 'plg_absatz_imageposition',
inputValue: 'left'
}));
EditForm.add(new Ext.form.Checkbox({
id:Ext.id(),
boxLabel: 'rechts',
checked: false,
name: 'plg_absatz_imageposition',
inputValue: 'right'
}));
EditForm.add(new Ext.form.Checkbox({
id:Ext.id(),
boxLabel: 'zentriert (gesamte Content-Breite)',
checked: false,
name: 'plg_absatz_imageposition',
inputValue: 'center'
}));

EditForm.end();



http://cms3.mandarin-ccds.com/ext_example.gif

All my checkboxes and (empty?) labels on the left side are wrapped by the div. I added a red border for debugging.

All I want is to wrap the checkboxes only with a scrolling DIV and add one label on the left side.

[jack.slocum]

EditForm.container(
{hideLabels:true,style:'overflow:auto;height:100px;width:400px;border:1px solid red;'});

[stever]

If the label is blank, shouldn't it not put in the colon sign?

[jack.slocum]

If the label is blank, shouldn't it not put in the colon sign?

It's built through a template. You can tell it with hideLabels:true or labelSeparator:''.

[q_no]

EditForm.container(
{hideLabels:true,style:'overflow:auto;height:100px;width:400px;border:1px solid red;'});

Well, if I hide the labels all my checkboxes are on the left side, below the labels of other form fields.
I still need a label on the left side and all checkboxes, wrapped by scrolling div, on the right side. I probably need two floating divs - one for the label - one for the boxes , but I don't know how to do it.... :-/

[jack.slocum]

Checkbox takes a config option "boxLabel" for the right label.

[q_no]

Checkbox takes a config option "boxLabel" for the right label.

hmm... is my english so bad? ;) I suppose you didn't really understand what I want to to...

A common multiselect field in a form has normally a fieldlabel and values. The boxlabels correspond to the values per checkbox. I need to display one(!) label on the left (for example "image position") and the checkboxes on the right (left, center,right,... whatever).

So, atm I've got a div wrapping all checkboxes and their values as boxlabel. I need a second div/container on the left to display the corresponding fieldname for ALL checkboxes. And that's the point I stuck atm..

[abraxxa]

I'm using the SuperBoxSelect UX since over a year but with every new ExtJS release new bugs arise.
Please add a multi select feature to the combobox which could also be used when transforming a html select with the multi attribute set.

Thanks!