Ext.ux.form.SuperBoxSelect as seen on facebook and hotmail

[MH61]

I'm using this extension on a wizard. I need 2 fields, Principal Investigator, and Co-Investigators. both work from the same ds, and no item can appear in both fields. Superbox select is perfect for this since it removes items from the store.

A few things i want to achieve:
-Principal Investigator should be single select, and for the most part look like a standard combo except for ability to delete selection
-Co-Investigators should be a set height, and once the items exceed the height it the box should be scrollable instead of growing

How can i achieve this. thanks

[akannu]

Dan,
we are experimenting with this control and like it so far. If we use the stackItems config and have one entry per row, can we also have drag and drop? We have one need where the order is important. I was thinking d&d is the easier way without adding up/down icons to the screen. Is it doable?

[danh2000]

Principal Investigator should be single select, and for the most part look like a standard combo except for ability to delete selection

A forceSingleSelection config wouldn't be too difficult to add, I'll add it to the list of features to add. Combined with renderFieldBtns: false I believe this would give you what you need.

-Co-Investigators should be a set height, and once the items exceed the height it the box should be scrollable instead of growing.

This will be a bit more work - I was going to add this functionality but stopped when I realised it would be a bigger job than I anticipated - I'd have to re-write some of the existing code and change the structure of how items are rendered.

I'd still like to do this, but it's going to be sat at the bottom of the pile whilst competing with paid work or until I have a need for the functionality myself.

[danh2000]

Dan,
we are experimenting with this control and like it so far. If we use the stackItems config and have one entry per row, can we also have drag and drop? We have one need where the order is important. I was thinking d&d is the easier way without adding up/down icons to the screen. Is it doable?

I would think it's achievable, but it isn't high on my priority list and I'm afraid it's likely to stay that way whilst I'm busy with other jobs. I'll add a To-Do item to look into this when/if other work calms down a bit.

[MH61]

A forceSingleSelection config wouldn't be too difficult to add, I'll add it to the list of features to add. Combined with renderFieldBtns: false I believe this would give you what you need.

Thanks, I'll give this a try

Edit: I added the forceSingleSelect config, and edited addItemBox so that the first action it performs is:

if(this.forceSingleSelection){
    this.removeAllItems();
}; 

I'm sure this isn't the best way since I'm a novice at this, but it works for me - each selection will replace the previous selection - works well with pinList: false.

However this still will expand the box thinking that a second item will be added, so i need to find out how to stop this bit from happening when this config is set to true. but as i said before i don't understend how this is happening so i guess i can't do anything to stop it

I tried renderFieldBtns: false but this removes both buttons... but i do still want the drop down button, i just want it to look the same as the standard drop down button, and i'd like the box to look like a standard combo (as this one has a little more padding in the height), can i just add a cls config for this? i'm terrible with css. Actually i guess there would be no harm in this looking exactly the same as a regular combo box, i probably don't even need the X next to the added item.

This will be a bit more work - I was going to add this functionality but stopped when I realised it would be a bigger job than I anticipated - I'd have to re-write some of the existing code and change the structure of how items are rendered.

I'd still like to do this, but it's going to be sat at the bottom of the pile whilst competing with paid work or until I have a need for the functionality myself.

I was trying to do this myself, but i couldn't actually figure out what is making the field expand. can you please point me in the right direction and hopefully i can create a workaround for myself

thanks

[imran]

Great extension!

I would suggest improving the renderFieldBtns property to accept an Object like: {"expand":true, "clear":false}

This would allow greater control for folks who would like to show one icon and not the other. Currently it's either all or nothing.

[danh2000]

I was trying to do this myself, but i couldn't actually figure out what is making the field expand. can you please point me in the right direction and hopefully i can create a workaround for myself

If you look at the structure, it's just an unordered list wrapped in a couple of divs - it grows to accomodate the child list items.


I'll add scrolling to a future version when I have time, but if you want to jump in yourself...

The basic approach would be to wrap the UL element in a fixed height div with overflow or oveflow-y set to auto. This is easy enough to achieve, but the structure of the list items and the delete buttons will likely need to change to accomodate for focusing elements that are outside of the scrollable viewport..... you'll have to try it to see what I mean.

Great extension!

I would suggest improving the renderFieldBtns property to accept an Object like: {"expand":true, "clear":false}

This would allow greater control for folks who would like to show one icon and not the other. Currently it's either all or nothing.

That's might be a good idea - I'll could add the ability to overload the config and use boolean or an object. It is currently achievable with css though:

.x-superboxselect-btn-clear  {
    display: none;
} 

And

.x-superboxselect-btn-expand {
    display: none;
} 

[qooleot]

Edit: A print function turns out to be a bad idea, read next post down to add CSS to make the widget more printer-friendly.

It seems printing a page with a superboxselect makes the data appear pretty funny. Just go to the example page and hit print. You get the input textbox at the end and its lined up vertically in a list. Firefox vs IE printing is not consistent.

I was thinking about creating a printFormat() function that hides the superboxselect and puts a normal comma separated text list in the place, but I wanted to see if:

1) has anyone already solved this problem
2) anyone have a better idea?

Thanks!

[qooleot]

Ok I got the printing to behave much better by adding this CSS:

@media print {
.x-superboxselect {
    padding: 1px  !important;
    margin: 1px  !important;
    overflow: auto !important;
  }

.x-superboxselect-display-btns {
    padding: 1px  !important;
    margin: 1px  !important;
    overflow: auto !important;
}

.x-superboxselect ul {
  list-style: none;
  overflow: auto !important;
}

.x-superboxselect ul li {
  float:left;
  padding-left: 1px !important;
  text-align: left;  
  overflow: auto !important;
  
}
.x-superboxselect-input{
  display: none;
}
}

[stever]

Is there a better download location? I get unsetDelayCheck is undefined errors.