[3.x] Ext.ux.form.SuperBoxSelect

[devtig]

Use this CSS to have a normal Combox height

.x-superboxselect {position:relative; height: auto !important; margin: 0px; overflow: hidden; padding:2px; display:block; outline: none !important;}
.x-superboxselect input[disabled] {background-color: transparent;}
.x-superboxselect ul {overflow: hidden; cursor: text;}
.x-superboxselect-display-btns {padding-right: 33px !important;}
.x-superboxselect-btns {position: absolute; right: 1px; top: 0; overflow:hidden; padding:2px;}
.x-superboxselect-btns div {float: left; width: 16px; height: 16px; margin-top: 2px;}
.x-superboxselect-btn-clear {background: url(../img/superboxselect/clear.png) no-repeat scroll left 0px;}
.x-superboxselect-btn-expand {background: url(../img/superboxselect/expand.png) no-repeat scroll left 0px;}
.x-superboxselect-btn-over {background-position: left -16px}
.x-superboxselect-btn-hide {display:none;}
.x-superboxselect li {float: left; margin: 1px; padding: 0;line-height: 14px;}
body.ext-ie6 .x-superboxselect li {line-height: 16px;}
.x-superboxselect-stacked li {float: none !important;}
.x-superboxselect-input input { border: none; outline: none; margin-top: 0px; margin-bottom: 1px;}
/* unnecessary (ie7 not tested):
body.ext-ie .x-superboxselect-input input {background: none; border: none; margin-top: 3px;}
.x-superboxselect-item {position: relative; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; o-border-radius: 6px; khtml-border-radius: 6px; border: 1px solid #CAD8F3; background-color: #DEE7F8; padding: 1px 15px 1px 5px !important; }
body.ext-ie7 .x-superboxselect-item {margin: 2px 1px 2px 1px; line-height: 1.2em; padding: 2px 17px 4px 5px !important;}
body.ext-ie6 .x-superboxselect-item {margin: 2px 1px 2px 1px; line-height: 1.2em; padding: 2px 19px 4px 5px !important;}
*/
.x-superboxselect-item {position: relative; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; o-border-radius: 6px; khtml-border-radius: 6px; border: 1px solid #CAD8F3; background-color: #DEE7F8; padding: 0px 15px 0px 3px !important; }
.x-superboxselect-item-hover {background: #BBCEF1; border: 1px solid #6D95E0;}
.x-superboxselect-item-focus {border-color: #598BEC; background: #598BEC; color: #fff;}
.x-superboxselect-item-close {background: url(../img/superboxselect/close.png) no-repeat scroll left 0px; border: none; cursor: default; font-size: 1px; height: 16px;padding:0; position: absolute; right: 0px; top: 0px; width: 13px;display:block;cursor:pointer;}
.x-superboxselect-item-close:hover, .x-superboxselect-item-close:active  { background-position: left -12px;}
.x-superboxselect-item-focus .x-superboxselect-item-close{ background-position: left -24px}
.x-item-disabled .x-superboxselect-item-close{ background-position: left -36px}

FF, IE8 and IE6 ok. 1px too high in Chrome. IE7 not tested yet. But this is already better then the way to high boxes as before.

[abraxxa]

I've discovered a bug:
The valuesquery isn't executed if the primary key value is shorten than this.minChars.
The fix is below.

diff --git a/root/static/Ext.ux.form.SuperBoxSelect.js b/root/static/Ext.ux.form.SuperBoxSelect.js
index 35f8e4f..529b605 100644
--- a/root/static/Ext.ux.form.SuperBoxSelect.js
+++ b/root/static/Ext.ux.form.SuperBoxSelect.js
@@ -1597,7 +1597,7 @@ Ext.ux.form.SuperBoxSelect = Ext.extend(Ext.ux.form.SuperBoxSelect,
                 }
                 q = qe.query;
                 forceAll = qe.forceAll;
-                if (forceAll === true || (q.length >= this.minChars)) {
+                if (forceAll === true || (valuesQuery === true && q.length > 0) || (q.length >= this.minChars)) {
                     if (this.lastQuery !== q) {
                         this.lastQuery = q;
                         if (this.mode == 'local') {

I'd like to setup a github repository for this UX as my main app depends pretty heavy on it.
If you use it too and want to contribute please tell me your opinion!

[zozofoz]

Which version are you using? It looks like it was fixed in the version I have. Mine says version 1.0 at top created 01/17/2010.

forceAll = qe.forceAll;
if(forceAll === true || (q.length >= this.minChars) || valuesQuery && !Ext.isEmpty(q)){
if(this.lastQuery !== q || forcedAdd){

[abraxxa]

I think I've fixed the bug in the original version over a year ago, but the extended version by Grolubao doesn't include it.

[Sesshomurai]

I'm having trouble getting this to work in 'remote' mode. The remote store works, the data loads into the combo, but I want to click on multiple combo results like the local mode. It doesn't work.

Anyone see or fix this?

thanks.

[abraxxa]

Can you please explain the problem in more detail?
I'm using it only in remote mode and everything works as expected.
When you click the trigger all items are displayed, when you click one it is added to the list. You can repeat this multiple times.

[devtig]

First get your functionality to work with a regular Ext.form.ComboBox. If that works and only then, you switch to the superselectbox.

[Sesshomurai]

So in the local mode example, it shows a bunch of items and when I click each item, it is put into the box and removed from the list - and the drop down list remains visible to allow for multiple items to be selected.

In remote mode, it does not behave this way for me. When I select an item from the list, it is put into the box and the list disappears.

Any advice?

thanks.

[abraxxa]

Click the trigger again, does it show the list again?

[Sesshomurai]

Click the trigger again, does it show the list again?

I'll check that when I get back to my computer. If I recall, it does. but what I want is for the list to stay open and items be removed as I click them, like local mode.