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

[Animal]

Hi Dan,

can I add a small Feature Request that I've just added here at a client's request?

Right now, to terminate one item, and add the typed characters, the ENTER key is explicitly listened for in the onKeyDownHandler method.

I'd like to request that this key be configurable:

    /**
     * @cfg {Number} itemDelimiterKey The key code which terminates keying in of individual items, and adds the current
     * item to the list. Defaults to the ENTER key.
     */
    itemDelimiterKey: Ext.EventObject.ENTER,

Then just the changes in red:

    onKeyUp : function(e) {
        if (this.editable !== false && !e.isSpecialKey() && e.getKey() !== this.itemDelimiterKey && (!e.hasModifier() || e.shiftKey)) {
            this.lastKey = e.getKey();
            this.dqTask.delay(this.queryDelay);
        }        
    },
    onKeyDownHandler : function(e,t) {
        var toDestroy,nextFocus,idx;
        if ((e.getKey() === e.DELETE) && this.currentFocus){
            e.stopEvent();
            toDestroy = this.currentFocus;
            this.on('expand',function(){this.collapse();},this,{single: true});
            idx = this.items.indexOfKey(this.currentFocus.key);
            
            this.clearCurrentFocus();
            
            if(idx < (this.items.getCount() -1)){
                nextFocus = this.items.itemAt(idx+1);
            }
            
            toDestroy.preDestroy(true);
            if(nextFocus){
                (function(){
                    nextFocus.onLnkFocus();
                    this.currentFocus = nextFocus;
                }).defer(200,this);
            }
        
            return true;
        }

        var val = this.el.dom.value, it, ctrl = e.ctrlKey;
        if(e.getKey() === this.itemDelimiterKey){

My client wants me to configure it with

    itemDelimiterKey: Ext.EventObject.SPACE,

[scishop]

I've placed the SuperBoxSelect in a a grid using a GridEditor. It works except that the entry field does not expand vertically.

Is this a bug, or, more likely, I'm I missing something obvious?

[danh2000]

I've placed the SuperBoxSelect in a a grid using a GridEditor. It works except that the entry field does not expand vertically.

Is this a bug, or, more likely, I'm I missing something obvious?

Sorry, I'm not supporting using it as a grid editor at this stage - it's been requested a couple of times though, so maybe a future release.

Hi Dan,

can I add a small Feature Request that I've just added here at a client's request?
...

Absolutely - I'll add that in - thanks.

[radtad]

Hi Dan,

can I add a small Feature Request that I've just added here at a client's request?

    itemDelimiterKey: Ext.EventObject.SPACE,

To expand on this, I think this should be a collection of items. I.e. SPACE, ENTER, semicolon, comma, possibly even an onBlur, etc. That way I can configure it so the end user has multiple ways of having it add and item box.

[radtad]

Possible bug with allowing new data. If I start typing in an empty superbox field and tab out it does not remove the raw text or make it a box. However, if I have at least one box item in the superbox field and start typing and tab out it removes the raw text.

This will automatically wipe the raw text each time no matter what getCount() returns.

    applyEmptyText : function(){
        this.setRawValue('');
        if(this.items.getCount() > 0){
            this.el.removeClass(this.emptyClass);
            // this.setRawValue(''); the line should go at the top
            return this;
        }
        if(this.rendered && this.emptyText && this.getRawValue().length < 1){
            this.setRawValue(this.emptyText);
            this.el.addClass(this.emptyClass);
        }
        return this;
    },

It would be awesome if it was an option to make an item box or wipe the raw text onBlur, but this fix works just fine as well.

[abraxxa]

There is a typo in the code:
queryValuesInidicator instead of queryValuesIndicator

Edit: and I've found a bug related to loading elements when loading the form aka valuesQuery:
line 1392 here should be changed from

if(forceAll === true || (q.length >= this.minChars)){

to

if(forceAll === true || (q.length >= this.minChars) || valuesQuery === true){

so that the query is always executed when searching by primary key.

[radtad]

There is a big bug when allowing new data to be added. You can reproduce this on your states Example 4. If you type 'c' and let the menu expand it returns the following:

California
Colorado
Connecticut

This is just what you would expect. Now keep typing California by entering 'ali' etc. Then backspace to just 'c'. You don't get the 3 results you initially received when just typing 'c'. It only returns California still.

[danh2000]

Sorry for my lack of responses - I've just moved house to an island that's only accessible by boat. This has been a massive undertaking (especially with a 7 month old baby).

I'll get round to answering questions and fixing bugs when I catch up with my paid jobs.

Thanks,

Dan

[radtad]

There is a big bug when allowing new data to be added. You can reproduce this on your states Example 4. If you type 'c' and let the menu expand it returns the following:

California
Colorado
Connecticut

This is just what you would expect. Now keep typing California by entering 'ali' etc. Then backspace to just 'c'. You don't get the 3 results you initially received when just typing 'c'. It only returns California still.

This is the code not allowing the query to go through since BACKSPACE is a special key.

    
    onKeyUp : function(e) {
          if (this.editable !== false && !e.isSpecialKey() && (!e.hasModifier() || e.shiftKey)) {
            this.lastKey = e.getKey();
            this.dqTask.delay(this.queryDelay);
        }
    },

I doubt this is the proper fix, but it works...

if (this.editable !== false && (!e.isSpecialKey() || e.getKey() === e.BACKSPACE) && (!e.hasModifier() || e.shiftKey))

...and no biggie on not responding for a while Dan

[syscobra]

Hello All

First of all Thanks Dan for this very cool extension.

I was using it in a job i was making and my boss wanted to use some normal style like the present in other Ext Widgets, So i modified the css and came out with something more close to the ext widgets style, so i am sharing it now with the community.

Here is an screenshoot:

Here is the dan Examples using this css:
http://playground.ideashs.com/superboxselect/
And here is the css with the image files required:
http://playground.ideashs.com/superb...ctsmallcss.zip

I hope someone find it useful.

Cya around.