Ext.ux.BoxSelect (like the Facebook's one)

[tintin]

After having seen this, read this, and this, I wrote this extension.



Demo

Usage:

• Items can be deleted individually
• Managed keys: backspace, delete, left/right arrows

Todo list:

• Manage some combo config options like allowBlank=false

Tested in IE6/7, FF2/3, Opera, Chrome.

All advices are welcome

04.30.2008 : Corrected bug on delete key pressed

09.15.2008 : NEW VERSION

• File renamed (initially it was intended to be a plugin but not anymore)
• Duplicate entries avoided (it's not an option, otherwise it wouldn't work correctly)
• Right rendering in different browsers (rounded corners only in Gecko)
• New methods like setValue, enable, disable
• Initial value handled in different ways (collection of record, array of IDs, string of IDs)

[VinylFox]

Love it...you come up with some sweet stuff. Love toast as well.

Keep up the good work.

[chalu]

This is awesome, you've handed me the base for my next extension . Keep it up

[krycek]

tintin, just see your extension.

Great great work.

Congratulations!

[stever]

Very nice!

[SteveEisner]

This rocks. Great job.

I've noticed from the demo that there are some selection issues:
* when you start to type, and then back up erasing the entire word, it selects the previous "resolved" item rather than leaving you with a caret on empty text
* cursor left and right gets confused sometimes (again, probably around empty text)

I haven't used the component yet but if when do I'll try to figure out what's breaking those
Steve

[sunny_boy]

Tintin - great extension thanks

I was just testing in IE6, and noticed that if the length of the items inside the box become larger than the box itself, the items do not wrap correctly - see screenshot.

Works fine in FF.

I've had a look, but have not yet found a fix.

Any ideas?

[gelleneu]

I have a question about this great extension.

I use it inside a form, and I want to save the items in a database.

When i submit my form, the items will be appended as post vars in this way:

(field name = "boxselectfield", values are Id's of the items)

boxselectfield=23&boxselectfield=25&boxselectfield=

Reading this post vars in PHP with $_REQUEST['boxselectfield'] results only the last
value, and this value is empty.

Has someone experience with that?

My next question: if an item is not in the list, i want to add it to the list automatically (a database operation is needed for that.)

Is there are solution for that?

Thanks!

[mabello]

Very very nice extension, great job!
A small suggestion: why don't you also insert in your TextField a trigger button (like a combo) that on click show the list of all the possibility so that you can also see the entire list of possibilty and chose from that list? For now the list appears only digiting I think, it seems useful to me!
Anyway, keep up the great work!

[Evolic]

I have a question about this great extension.

I use it inside a form, and I want to save the items in a database.

When i submit my form, the items will be appended as post vars in this way:

(field name = "boxselectfield", values are Id's of the items)

boxselectfield=23&boxselectfield=25&boxselectfield=

Reading this post vars in PHP with $_REQUEST['boxselectfield'] results only the last
value, and this value is empty.

Has someone experience with that?

My next question: if an item is not in the list, i want to add it to the list automatically (a database operation is needed for that.)

Is there are solution for that?

Thanks!

I found something working:

    addBox: function(id, caption){
        var box = new Ext.ux.Box({
            id: 'Box_' + id,
            maininput: this.maininput,
            renderTo: this.holder,
            className: this.options['className'],
            caption: caption,
            'value': id,
            listeners: {
                'remove': function(box){
                    this.selectedValues[box.value] = null;
                },
                scope: this
            }
        });
        box.render();

        if (this.hiddenName) {
            var name = this.hiddenName;
        } else {
            var name = this.name + '[' + id + ']';
        }

        box.hidden = this.el.insertSibling({
            'tag':'input',
            'type':'hidden',
            //'value': id,
            'name': name
        },'before', true);

PHP $_POST:

Array
(
    [states] => Array
        (
            [AL] => 
            [NY] => 
            [MN] => 
            [New obj 1] => 
            [New obj 2] => 
        )
    [subject] => 
    [msg] => 
)