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

[danh2000]

Ups Sorry i use the 3.x Version but i think is the same with ontrigger or?

There is only one version of the code for both Ext 2.* and Ext 3.* - the same approach will work with either version of the library.

[travisbell]

I was wondering if anyone has an event override for additem?

I am trying to load default values that is dynamically called via Ajax and populate the Combo using a copy of the setValue function - I have called this setDefaultValue.

/**
     * Sets the default values of the SuperBoxSelect component.
     * @methodOf Ext.ux.form.SuperBoxSelect
     * @name setDefaultValue
     * @param {String|Array} value An array of item values, or a String value containing a delimited list of item values. (The list should be delimited with the {@link #Ext.ux.form.SuperBoxSelect-valueDelimiter) 
     */
    setDefaultValue : function(value){
        if(!this.rendered){
            this.preRenderValue = value;
            return;
        }
        
        var values = Ext.isArray(value) ? value : value.split(this.valueDelimiter);
        this.removeAllItems().resetStore();
        
        //reset remoteLookup because setDefaultValue should overwrite everything
        //inc pending data
        this.remoteLookup = [];
        
        Ext.each(values,function(val){
            var record = this.findRecord(this.valueField, val);
            if(record){
                this.addRecord(record);
            }else if(this.mode === 'remote'){
				this.remoteLookup.push(val);            	
            }
        },this);
        
        if(this.mode === 'remote'){
      		var q = this.remoteLookup.join(this.queryValuesDelimiter); 
      		this.doQuery(q,false, true); //3rd param to specify a values query
        }
        
    },

gridSteps.getSelectionModel().on('rowselect', function(grid, rowIndex, e) {
	
		var selectionModel = gridSteps.getSelectionModel();
		var record = selectionModel.getSelected();
		
		var WorkflowStepId = record.data['workflowstepid'];
		
		// Get List of Employee Ids when Workflow Step is selected.
		Ext.Ajax.request({
			url: '#application.webserver#/#application.root#/components/Workflow.cfc?method=GetWorkflowStepList&intWorkflowStepId='+WorkflowStepId,
			success: function(response,options) {
				
				getField1Combo.setDefaultValue(response.responseText);
				
			}
		});
		
	});

I do not wish to have the additem function called when this is occuring, I only wish for additem to work when users are adding new values.

Where abouts in the main code (SuperBoxSelect.js) can I override and "suspend" the additem function?

Apologies if this has been raised before, but I am at a total loss at the moment and getting tight for time in getting this project completed.

I am needing to do this as well.

What's the best way to use a remote store, but have some default values populate without the additem function being called?

I can *for now* just restrict the added values to be unique but that's a hack. I can't seem to figure out a way to not have the additem function get called when using a remote store...

[danh2000]

I am needing to do this as well.

What's the best way to use a remote store, but have some default values populate without the additem function being called?

I can *for now* just restrict the added values to be unique but that's a hack. I can't seem to figure out a way to not have the additem function get called when using a remote store...

Do you mean you don't want the additem event to trigger the handler?

The simplest way would be to suspend events, use setValueEx to set the default values, then resume events.

The more complicated but complete way would be to create a new setDefaultValue method, and trace everything through to the addRecord method (where the additem event is fired) overriding these methods to pass an additional param (all the way to addRecord) that indicates that you wish to supress this event from firing.

You can then do something like:

if(!supressEvent){
    this.fireEvent('additem', this, val, record);
} 

[grzegorz.borkowski]

We've some observed behavior that looks like a bug in the component. If you define initial value on the SuperBoxSelect initial config, and shortly after this (before it's get rendered) you set value to different one, the initial value overrides the one set later.
In the component source there is a code which seems to be written to prevent such case (using preRenderValue) but it looks like broken - it doesn't work well. I attach the testcase - the expected result is to see Item2 and Item4 to be displayed, but instead it diesplay Item1 (from initial config).
We've identified possible solution to this problem, which requires modification to onRender method in SupeBoxSelect source, and adding afterRender method:

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

        // move this code to overriden afterRender method:
        //if(this.preRenderValue){
        //    this.setValue(this.preRenderValue);
        //    this.preRenderValue = null;
        //}
    },

    afterRender: function() {
        Ext.ux.form.SuperBoxSelect.superclass.afterRender.call(this);
        if(this.preRenderValue){
            this.setValue(this.preRenderValue);
            this.preRenderValue = null;
        }
    }

[danh2000]

@grzegorz.borkowski

Thanks for the report, that's a scenario I hadn't considered. I will fix this in the next version.

Regards,

Dan

[dizor]

I have problems with submit form and getForm().load.

When i load data info form with this JSON:

{"success":true,"data":{"customers_regon":"16,9"}}

1) everything working ok with hiddenName: "customers_regon"
2) but i must use hiddenName: "customers_regon[]" (because submit more then one value) and with this doesn't load any values.

Before i found this plugin i use Ext.ux.form.LovCombo and this works with hiddenName: "customers_regon" because this submit in POST not :

customers_regon[]: 1 or customers_regon: 1
customers_regon[]: 2 or customers_regon: 2

but simply: customers_regon: 1,2

Can anybody help me with this?

},{
	xtype:'superboxselect',
	allowBlank: false,
	msgTarget: 'side',
	renderFieldBtns: true,
	fieldLabel: 'Countries',
	resizable: true,
	store: new Ext.data.JsonStore({
		url: "/html/get_pages",
		root: "data",
		id: "id",
		totalProperty: "total",
		fields: [{name:"customers_regon", mapping:"id"}, {name:"label"}],
		autoLoad: true
	}),
	mode: 'local',
	displayField: 'label',
	valueField: 'customers_regon',

        //hiddenName: "customers_regon[]",
        hiddenName: "customers_regon",

	anchor: '95%',
	classField: 'cls',
	styleField: 'style',
	extraItemCls: 'x-flag',
	extraItemStyle: 'border-width:2px'
}]

[danh2000]

@dizor,

I'm currently travelling and viewing this on my phone, so I can't see your code properly, however, it appears that you haven't given the component a name - can you please try with using the name config.

Thanks,

Dan

[dizor]

The problem occurred because i have error in JSON - i use:

{"success":true,"data":{"customers_regon":"16,9"}}

instead:

{"success":true,"data":{"customers_regon[]":"16,9"}}

@danh2000: thx for reply and great plugin!

[ozum]

Thx, great plugin. Nice and detailed control. One small issue to consider and I'll be very appreciated if it is addressed, because it prevents me to use in my project.

Control posts its values even it's set as disabled. For consistency with other Ext JS controls and according to HTML standards when a control is disabled, it shouldn't post its value when the form is submitted.

Best regards,

[ozum]

Below is a suggestion to prevent sending values when disabled. (Changes are in red)

CAVEAT: This only works when disabled via initial config. I'm not experienced in Ext JS. I think someone will come with a more elegant solution.

addItemBox : function(itemVal,itemDisplay,itemCaption, itemClass, itemStyle) {
        var parseStyle = function(s){
            var ret = '';
            if(typeof s == 'function'){
                ret = s.call();
            }else if(typeof s == 'object'){
                for(var p in s){
                    ret+= p +':'+s[p]+';';
                }
            }else if(typeof s == 'string'){
                ret = s + ';';
            }
            return ret;
        };
        var itemKey = Ext.id(null,'sbx-item');
        var box = new Ext.ux.form.SuperBoxSelectItem({
            owner: this,
            disabled: this.disabled,
            renderTo: this.wrapEl,
            cls: this.extraItemCls + ' ' + itemClass,
            style: parseStyle(this.extraItemStyle) + ' ' + itemStyle,
            caption: itemCaption,
            display: itemDisplay,
            value:  itemVal,
            key: itemKey,
            listeners: {
                'remove': function(item){
                    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)]);
                    }
                },
                destroy: function(){
                    this.collapse();
                    this.autoSize().manageClearBtn().validateValue();
                },
                scope: this
            }
        });
        box.render();

        if (! this.disabled) {
            box.hidden = this.el.insertSibling({
                tag:'input', 
                type:'hidden', 
                value: itemVal,
                name: (this.hiddenName || this.name)
            },'before');
        }
        else {
            box.hidden = this.el.insertSibling({
                tag:'input', 
                type:'hidden', 
                value: itemVal,
                name: (this.hiddenName || this.name),
                disabled:'disabled'
            },'before');        
        }