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

[Gonfi]

hello,

currently the change event only fires when ADDING items to the selection, not when removing single items or all at once.

i have hacked in a couple lines to get those events too. it's dirty, clicking the x button on the right fires the change for every selected item, plus once. but at least it fires. x-removing single items fires correctly. maybe you want to take it from here ;-)

clearValue : function(supressRemoveEvent){
var hadItems = this.items.getCount() > 0;
var oldVal = (hadItems) ? this.getValue() : "";

Ext.ux.form.SuperBoxSelect.superclass.clearValue.call(this);
this.preventMultipleRemoveEvents = supressRemoveEvent || this.supressClearValueRemoveEvents || false;
this.removeAllItems();
this.fireEvent('clear',this);

if (hadItems) {
this.fireEvent('change',this, "", oldVal);
}

return this;
},

around line 1121:

'remove': function(item){
var valueBefore = this.getValue();

if(this.fireEvent('beforeremoveitem',this,item.value) === false){
return;
}
this.items.removeKey(item.key);
if(this.removeValuesFromStore){
if(this.usedRecords.containsKey(item.value)){
this.store.add(this.usedRecords.get(item.value));
this.usedRecords.removeKey(item.value);
this.sortStore();
if(this.view){
this.view.render();
}
}
}
if(!this.preventMultipleRemoveEvents){
this.fireEvent.defer(250,this,['removeitem',this,item.value, this.findInStore(item.value)]);

this.fireEvent('change',this, this.getValue(), valueBefore);

}
this.preventMultipleRemoveEvents = false;
},


also, around line 1148, this caused a problem in the new ext3 version, and is fine when removed:

destroy: function(){
this.collapse();
//this.autoSize().manageClearBtn().validateValue(); //causes problem
},

it would be nice if there was a rendering that uses standard field height.

thanks for the component,
greetings

[danh2000]

@Gonfi,

Form fields are not supposed to fire the change event until just before blur. If it fires when adding items, I'd say that's the bug, not that it doesn't fire when removing.

I'm very busy at the moment, but will look at the events and aim to get a new release up within a week, however I'll be following suit from other form fields so you won't get the event fired in the places you've added it.

Thanks.

Dan

[jackjia]

Wow, very nice extension. Thanks for sharing.

[GraemeBryce]

This is indeed a great control.

One thing I have spent hours trying to figure out (ashamed to admit it really is hours!) is why when all the values are removed does the field no longer exist in a form post or a request the the basic form getValues.

This means i am unable to clear the value at the server unless I detect the field is acually missing.

I want to just post the field with no value or even '' but no luck.

can anyone suggest a way? or even why it is doing it.

[danh2000]

@jackjia Thanks.

@GraemeBryce Thanks. I've just implemented a forceFormValue option - when set to true, you will get an empty string in the the parent BasicForm getValues method or when you manually submit the raw dom form.

I'll release the next version here in the next 24 hours.

Dan

[GraemeBryce]

Great.

I look forward to seeing how you did it. Many thanks for the continued support of this extension.

[danh2000]

Great.

I look forward to seeing how you did it. Many thanks for the continued support of this extension.

An explanation for you, so you don't have to hunt:

The values come from hidden inputs - 1 for each selected item, they don't come from the input el (where you type for autocomplete). With this in mind....

-I was removing the name attribute from the input el, so that it was not included in the raw form submission. Now, if you use the new forceFormValue config, I manage the name attribute of the input el, so it does get included if no items (zero items) have been selected.

-I have always intercepted the getValues method of the parent BasicForm - I still intercept this method, but I now inject a blank string into the return values if no items (zero items) have been selected.

Regards,

Dan

[danh2000]

I've update the first post in this linked thread with a new version containing:

-Fix to prevent the component receiving focus when reset is called.
-Removed unnecessary usage of trim.
-Fixed bug in setValueEx method.
-Added a new forceFormValue config to force form values (submission or BasicForm.getValues) even when no items selected

The amount of functionality X Ext Versions X Browser Combinations are quite an overhead to test, so please go easy on me if I've broken anything and you find errors - I'll do what I can to resolve any issues in a timely manner.

Regards,

Dan

[Animal]

Small bug. When disabling the overall widget, the items are disabled, but their KeyMaps are not disabled, so you can still interact with the widget - it's not fully disabled.

Ext.ux.form.SuperBoxSelectItem needs

    setupKeyMap : function(){
        this.keyMap = new Ext.KeyMap(this.lnk, [
            {
                key: [
                    Ext.EventObject.BACKSPACE, 
                    Ext.EventObject.DELETE, 
                    Ext.EventObject.SPACE
                ],
                fn: this.preDestroy,
                scope: this
            }, {
                key: [
                    Ext.EventObject.RIGHT,
                    Ext.EventObject.DOWN
                ],
                fn: function(){
                    this.moveFocus('right');
                },
                scope: this
            },
            {
                key: [Ext.EventObject.LEFT,Ext.EventObject.UP],
                fn: function(){
                    this.moveFocus('left');
                },
                scope: this
            },
            {
                key: [Ext.EventObject.HOME],
                fn: function(){
                    var l = this.owner.items.get(0).el.focus();
                    if(l){
                        l.el.focus();
                    }
                },
                scope: this
            },
            {
                key: [Ext.EventObject.END],
                fn: function(){
                    this.owner.el.focus();
                },
                scope: this
            },
            {
                key: Ext.EventObject.ENTER,
                fn: function(){
                }
            }
        ]);
        this.keyMap.stopEvent = true;
    },
    onEnable: function() {
        Ext.ux.form.SuperBoxSelectItem.superclass.onEnable.apply(this, arguments);
        this.keyMap.enable();
    },
    onDisable: function() {
        Ext.ux.form.SuperBoxSelectItem.superclass.onDisable.apply(this, arguments);
        this.keyMap.disable();
    },

[danh2000]

Thanks Animal - fix included for next release