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

Quote:

---

Originally Posted by zilionis

Heh i made too few weeks ago, already posted here http://extjs.com/forum/showthread.ph...light=facebook

---

yes i mentioned that 1 post above yours ;)

you're both using different approaches though -- you've used a combo for each input, while tintin directly extended a combo. it'd be interesting to see how both plugins develop. :)

I added a way to include new tags that aren't on the data collection by overwriting onKeyUp property like this:

Code:

---

onKeyUp: function(e)
                {
                        if(e.getKey() == e.ENTER)
                        {
                                var value = this.el.dom.value;
                                if(value.length > 0)
                                {
                                        this.selectedValues[value] = value;
                                        this.addBox(value, value);
                                        this.el.dom.value = '';
                                }
                        }
                        else
                        {
                                if (this.editable !== false && !e.isSpecialKey())
                                {
                                        this.lastKey = e.getKey();
                                        if (e.getKey() == e.BACKSPACE && this.el.dom.value.length == 0)
                                        {
                                                e.stopEvent();
                                                this.collapse();
                                                var el = this.maininput.prev();
                                                if (el)
                                                        el.focus();
                                                return;
                                        }
                                        this.dqTask.delay(this.queryDelay);
                                }
                               
                                this.autoSize();
                               
                                Ext.ux.BoxSelect.superclass.onKeyUp.call(this, e);
                        }
                },

---

Is there a better way to do this?

I also had to add the following to avoid errors on pibos's modifications:

Code:

---

Ext.each(this.value, function(item)
                        {
                                if(item)
                                {
                                        if(this.displayFieldTpl)
                                        {
                                                caption = this.displayFieldTpl.apply(item);
                                        }
                                        else
                                        {
                                                caption = item[this.displayField]
                                        }
                                        this.addBox(item[this.valueField], caption);
                                }
                        }, this);

---

Thanks.

@Pibos: I get "Invalid argument" when trying to use your code to set the initial value (happens in both IE7 and FF3b5). It breaks in this section (line 2735 of ext-all-debug.js (v2.0.2)):

Code:

---

setWidth : function(width, animate){
        width = this.adjustWidth(width);
        if(!animate || !A){
            this.dom.style.width = this.addUnits(width);
        }else{
            this.anim({width: {to: width}}, this.preanim(arguments, 1));
        }
        return this;
    },

Error: Width is NaN

---

I think this is because the value property is already being used by the combobox, by changing the name to initialValue or whatever your code runs fine! :)

another thing missing: a call to this.selectedValues[id] = id; in the addBox function. Otherwise initally loaded items will not be returned by the getValues() function...

IE7/IE6: Box-corners are not rounded

Is there a way we can make this search through underlying data too perhaps? i.e. something that is not in the displayField. Also, it would be awesome to have this be a soundex search as well.

just some thoughts...

Tintin - great extension :D 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?

Ok - I found a solution to the bug I raised earlier - though not sure if this is the best approach.

Code:

---

ul.holder { margin: 0; overflow: hidden; height: auto !important; height: 1%; padding: 0; }

---

The overflow property was causing the issue in IE. Removing it fixed IE, but broke the display in FF. Instead of putting a hack in the css, I chose remove the overflow property from the css, and make the following change to the onRender function in Ext.ux.BoxSelect

Code:

---

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

                this.el.removeClass('x-form-text');
                this.el.className = 'maininput';
                this.el.setWidth(20);

                this.holder = this.el.wrap({
                        'tag': 'ul',
                        'class':'holder x-form-text'
                });
                if(!Ext.isIE) {
                        this.holder.dom.style.overflow='hidden';
                }
                               
                this.holder.on('click', function(e){
                        e.stopEvent();
                        if(this.maininput != this.current) this.focus(this.maininput);               
                }, this);

                this.maininput = this.el.wrap({
                        'tag': 'li', 'class':'bit-input'
                });
               
                Ext.apply(this.maininput, {
                        'focus': function(){
                                this.focus();
                        }.createDelegate(this)
                });
               
        },

---

Any suggestions on a better way to do this?

@sunny_boy, Ext automatically adds a browser-specific CSS class to the <body> tag.

e.g. ext-gecko, or ext-ie

use some css like this instead

Code:

---

ul.holder { margin: 0; overflow: hidden; height: auto !important; height: 1%; padding: 0; }
.ext-gecko ul.holder { overflow: hidden;}

---

[edit]
i haven't dived into this plugin yet, so you might want to somehow make those css rules more specific so they only apply to this plugin.

Awesome! =P~ Thank you for this wonderful extension!

Thank you Tintin for this great Extension and also to you Pibos for your improvement.
Pibos, there is something wrong if you don't set 'value' config option. Ext.ux.Boxselect throws an exception. I suggest you to replace the following code at line number (163 ?) :

PHP Code:

---

        if(this.value){
            if(typeof this.value === 'string')
                this.value = [this.value]
        }
        
      Ext.each(this.value, function(item){
        
          if(this.displayFieldTpl)
               caption = this.displayFieldTpl.apply(item);
           else
                caption = item[this.displayField]
                
             this.addBox(item[this.valueField], caption);
       }, this); 


---

by this one :

PHP Code:

---

if(typeof this.value !== 'undefined'){
            if(typeof this.value === 'string')
                this.value = [this.value]
        
        
            Ext.each(this.value, function(item){
        
                if(this.displayFieldTpl)
                    caption = this.displayFieldTpl.apply(item);
                else
                    caption = item[this.displayField]
                
                this.addBox(item[this.valueField], caption);
            }, this);
    } 


---

And now, all works fine.

Al

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!