[beta] Ext.ux.ItemSelector (part of Ext.ux.Multiselect v1.2)

[andrei.neculau]

@tjstuart
since you're preparing for a new release, you might want to consider the following for visual consistency:
When you mark it as invalid, you have that extra border bumping the whole element down 1px and right 1px (the red border).
What you should try to do is this:

1. make .ux-mselect { border: 0; overflow:auto; } in order to counter the border effect of the x-combo-list

2. add x-form-field to the element, inside onRender, and set width and height

this.el = ct.createChild(); 
this.el.dom.style.zoom = 1;
this.el.addClass(this.fieldCls);
this.el.setWidth(this.width);
this.el.setHeight(this.height);

3. set list height and width

this.list = new Ext.Layer({
shadow: false, cls: [cls, 'ux-mselect'].join(' '), constrain:false
}, div);
        
var lw = this.width - this.el.getFrameWidth('lr');
var lh = this.height - this.el.getFrameWidth('tb');

This way when you have the usual blue border for the field, and when you markInvalid the red border is not taking up more space.

[andrei.neculau]

Another "improvement" is related to validation.
For my interests I added validation for blank, min length and max length (length = number of selections)

for instance... adding these properties

    allowBlank:true,
    minLength:0,
    maxLegnth:Number.MAX_VALUE,
    blankText:Ext.form.TextField.prototype.blankText,
    minLengthText:'Minimum {0} item(s) required',
    maxLengthText:'Maximum {0} item(s) allowed',

then append to onViewClick and to setValue

this.validate();

and then append these functions to the component

    getRawValue: function(valueField){
        var tmp = this.getValue(valueField);
        if (tmp.length){
            tmp = tmp.split(',');
        }
        else{
            tmp = [];
        }
        return tmp;
    },

    setRawValue: function(values){
        setValue(values);
    },

            validateValue : function(value){
        if(value.length < 1){ // if it has no value
             if(this.allowBlank){
                 this.clearInvalid();
                 return true;
             }else{
                 this.markInvalid(this.blankText);
                 return false;
             }
        }
        if(value.length < this.minLength){
            this.markInvalid(String.format(this.minLengthText, this.minLength));
            return false;
        }
        if(value.length > this.maxLength){
            this.markInvalid(String.format(this.maxLengthText, this.maxLength));
            return false;
        }
        return true;
    }

The reason why I kept allowBlank is because the value of the field is actually textual..
Theoretically it should be without allowBlank, since allowBlank = false means minLength = 1

[andrei.neculau]

Here I come with another thing --- implementing gridEditor with Multiselect

first of all, there's a need for a proper setSize function

setSize:function(w, h){
        Ext.ux.Multiselect.superclass.setSize.call(this, w, h);
        if(typeof w == 'object'){
            h = w.height;
            w = w.width;
        }
        if (!this.boxReady){
            return this;
        }
        if (typeof w == 'number'){
            this.el.setWidth(w);
            var lw = w - this.el.getFrameWidth('lr');
            this.list.setWidth(lw);
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
        }
        if (typeof h == 'number'){
            this.el.setHeight(h);
            var lh = h - this.el.getFrameWidth('tb');
            this.list.setHeight(lh);
            this.innerList.setHeight(lh - this.list.getFrameWidth('tb'));
        }
        return this;
    },

and then there are some tweaks for the GridEditor. The main tweaking is that we should make the editor resizable. Why?.. well.. consider that field equals "1,4,5" but then the store is like 1->Home, 4->At the office, 5->Everywhere else.
Imagine the editor being connected to a column that is only 25px wide. You would see probably just Home, At the o, Everyw.. and nothing past that. So let's add the resizable property to the GridEditor

Ext.grid.GridEditor.prototype.onRender = Ext.grid.GridEditor.prototype.onRender.createSequence(function(ct, position){
    if (this.resizable){
        this.resizer = new Ext.Resizable(this.el,{
            pinned:true, handles:'e'
        });
        this.resizer.on('resize', function(r, w, h){
            this.setSize(w, h);
        }, this);
    }
    this.setSize(this.width, this.height);
});

Ext.grid.GridEditor.prototype.onShow = Ext.grid.GridEditor.prototype.onShow.createSequence(function(){
    if (this.resizable){
        var sz = this.el.getSize();
        this.field.setSize(sz.width, sz.height);
    }
});

[LATER EDIT]
one quick fix needed for this.. because there is no field to acquire focus/blur, the grideditor will need to be taken away some other way. My solution was catching rowclick, so..

Ext.override(Ext.grid.EditorGrid, {
    onClick : function(e){
        this.stopEditing();
        this.processEvent("click", e);
    }
});

[andrei.neculau]

I'm coming with another small improvement. Since the normal getName() for a field looks like

getName: function(){
         return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
    },

inside the onRender function, you should append this

        this.hiddenField = this.el.createChild(this.defaultAutoCreate);

        this.hiddenName = this.name;

This way, you can also do form.loadRecord(rec), otherwise the parsing of the fields will not find the Multiselect component.

Hope you find these tweaks/fixes useful I'm just posting them while I'm using them inside my application.

Cheers

PS: the GridEditor implementation.. well.. it works, but I think it would be much more natural to make it look liek ComboBox.. meaning.. a textfield with the multiselect as drop-down. It kind of makes more sense visually. Anyone? as I'm not plunging into that very soon.

[tjstuart]

Great stuff andrei.neculau! Good man!

I've incorporated most of your suggestions. See thread detailing v2.0 of Ext.ux.Multiselect/ItemSelector ... http://extjs.com/forum/showthread.php?t=13202

[Magicbob]

Hello

I don't know if it is because i don't use well your great extension but i had a little problem when using itemselector with datastores. when the toStore was not empty when loading and when i submit the form directly without doing anything the hidden field value was empty.
After a click to add a value it was ok and there was all values when submitting

I fixed my problem by adding

this.toStore.on('load', this.valueChanged, this);

Thanks

Magicbob

[tjstuart]

Well spotted Magicbob! I'll add this fix to 2.1 which I'll release early next week. Also, please use this thread in future http://extjs.com/forum/showthread.php?t=13202

Cheers