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

[radtad]

@radtad,

Nice - why don't you make it a standalone plugin, that way you could plug the functionality into SuperBoxSelect, or ComboBox or any component that extends ComboBox.

I could definitely do that (never really came to mind and now that you've suggested it I probably will), I just figured it makes more sense to be part of SuperBoxSelect / ComboBox. But I'd probably be more for iterating through the fields in the store. That would be even better!

[radtad]

I've added a display fix so the outerbox border highlights on focus which is what all other form fields do:

    onRender:function(ct, position) {
        Ext.ux.form.SuperBoxSelect.superclass.onRender.call(this, ct, position);

        this.el.removeClass('x-form-text');
        this.el.addClass('x-superboxselect-input-field');

        this.wrapEl = this.el.wrap({
            tag : 'ul'
        });

        var extraClass = (this.stackItems === true) ? 'x-superboxselect-stacked' : '';

        if(this.renderFieldBtns){
                extraClass += ' x-superboxselect-display-btns';
        }
        this.outerWrapEl = this.wrapEl.wrap({
            tag : 'div',
            cls: 'x-form-text x-superboxselect ' + extraClass
        });

        this.on('focus', function() {
            this.outerWrapEl.addClass("x-form-focus");
        });

        this.on('blur', function() {
            this.outerWrapEl.removeClass("x-form-focus");
        });

        this.inputEl = this.el.wrap({
            tag : 'li',
            cls : 'x-superboxselect-input'
        });

        if(this.renderFieldBtns){
                this.setupFieldButtons();
                this.manageClearBtn();
        }

        this.setupFormInterception();
    },

Also, don't know if this is a bug, but I'm not sure the parameter name should set itself to the same thing if hiddenName doesn't exist so I went ahead and fixed it:

        box.hidden = this.el.insertSibling({
            tag:'input',
            type:'hidden',
            value: itemVal,
            name: (this.hiddenName || this.name+'['+itemVal+']') // could also be this.name+'[]' I assume
        },'before');

[danh2000]

@radtad,

Thanks - I had omitted the x-form-focus.

I'm not sure what you were aiming for with the second piece of code, but it won't work - the hidden items need to be named as per hiddenname or name so that getValues works from the parent form. What were you doing here - did you find an issue before trying to change it?

[radtad]

If you just use this.name instead of this.name+'['+itemVal+']', it will return the following if you're not using a hiddenName field with more then one list value (unless I'm missing something).

If I've got 3 boxes in a field i.e. tad,john,chris the parameters posted are:

email=tad
email=john
email=chris

This doesn't form any kind of array and instead overwrites each parameter if I'm not mistaken...at least it does for me.

[danh2000]

If you just use this.name instead of this.name+'['+itemVal+']', it will return the following if you're not using a hiddenName field with more then one list value (unless I'm missing something).

If I've got 3 boxes in a field i.e. tad,john,chris the parameters posted are:

email=tad
email=john
email=chris

This doesn't form any kind of array and instead overwrites each parameter if I'm not mistaken...at least it does for me.

If you are using PHP you have to declare the name with square brackets to recieve array data, so call your field email[] instead. This is not the same for other server-side technologies, so it's up to you as the implementor to name the field in this way. You would have to do the same in a standard HTML form too.



Dan

[elderotaku]

I found a wierd problem which I was able to repeat on this link:
http://technomedia.co.uk/SuperBoxSelect/applyTo.html

So I am assuming it is a problem with the Box Select and wondered if anyone knew how to fix it.

If you paste text into the box select or press and hold a character key you will see that the beginning of the text is cut off, if you press any key after that it fixes itself.

Any help would be greatly appreciated.

[danh2000]

I found a wierd problem which I was able to repeat on this link:
http://technomedia.co.uk/SuperBoxSelect/applyTo.html

So I am assuming it is a problem with the Box Select and wondered if anyone knew how to fix it.

If you paste text into the box select or press and hold a character key you will see that the beginning of the text is cut off, if you press any key after that it fixes itself.

Any help would be greatly appreciated.

It's the textbox grow code. I'll look into it when I get a chance and post back.

[nohurge]

Hi ,
I am using this on a new project , great job thanks.

When allowAddNewData is true , let's say for tags , i type "a" and the first word coming up is attribute but i want to add "at" as new data ,i have to click and make the suggestions to lose focus , so i can add new data later.
Is there a way to avoid this? When allowAddNewData is true , the suggestions should be visible but not focused.

[danh2000]

Hi ,
I am using this on a new project , great job thanks.

When allowAddNewData is true , let's say for tags , i type "a" and the first word coming up is attribute but i want to add "at" as new data ,i have to click and make the suggestions to lose focus , so i can add new data later.
Is there a way to avoid this? When allowAddNewData is true , the suggestions should be visible but not focused.

Hi, glad you like the component.

I built in a Ctrl+Enter hook for the scenario you describe. Does this help or are you talking about
mouse interaction only?

[nohurge]

It works great , thanks