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

[danh2000]

The zip in first post still not work in IE6 (onRender fails ext-all-debug.js) and now have strange css issues in FF2.

Greetings,

I've just tried IE6 - no problems here - can you ellaborate? anyone else having problems?

The code at the following url's is/should be the same version - do you have the same problems here:

http://technomedia.co.uk/SuperBoxSelect/examples.html
http://technomedia.co.uk/SuperBoxSelect/examples3.html

I haven't tested with FF2 - it's an unsupported browser with an incredibly low percentage of users - if you have a real need to support it, the issues could probably be fixed if I knew what they were.

Thanks,

Dan

[mystix]

I'm going to start calling you HawkEye!

Thanks.

it pays to have a good IDE
(tried IntelliJ IDEA 8 yet?)

[galdaka]

I've just tried IE6 - no problems here - can you ellaborate? anyone else having problems?

The code at the following url's is/should be the same version - do you have the same problems here:

http://technomedia.co.uk/SuperBoxSelect/examples.html
http://technomedia.co.uk/SuperBoxSelect/examples3.html

I haven't tested with FF2 - it's an unsupported browser with an incredibly low percentage of users - if you have a real need to support it, the issues could probably be fixed if I knew what they were.

Thanks,

Dan

I tried with old example in local. With new example all OK.

Excellent work!!

Greetings,

[danh2000]

@mystix,

I've never tried 'IntelliJ IDEA 8' - I've always used Eclipse. I'll have a look though - thanks.

@galdaka,

Thanks for trying again and reporting back

[galdaka]

Hi,

Fully integrated in my xtheme-gray-extend. Awesome extension!!

Greetings,

[danh2000]

Hi,

Fully integrated in my xtheme-gray-extend. Awesome extension!!

Greetings,

It looks fantastic in gray - well done! and glad you like it

[MarkBOneSmart]

IE 7 but probably all IE:
When a SuperBoxSelect is drawn on a tab, the first onResize fails because the w isNaN .. Here is my modified code.

    onResize : function(w, h, rw, rh) {
        var reduce = Ext.isIE6 ? 4 : Ext.isIE7 ? 1 : Ext.isIE8 ? 1 : 0;
        if (isNaN(w)) {
            //Control not rendered
        } else {
            this._width = w;
            if (this.outerWrapEl) {
                this.outerWrapEl.setWidth(w - reduce);
                if (this.renderFieldBtns) {
                    reduce += (this.buttonWrap.getWidth() + 20);
                    this.wrapEl.setWidth(w - reduce);
                }
                Ext.ux.form.SuperBoxSelect.superclass.onResize.call(this, w, h, rw, rh);
                this.autoSize();
            }
        }
    },

On BasicForm.Load, if the store is not populated, setValue blows out the store value. I decided to use the allowAddNewData functionality so that the control at least doesn't delete the value until the store does get populated.

setValue: function(value){
        var values = value.split(this.valueDelimiter);
        this.removeAllItems().resetStore();
        
        Ext.each(values,function(val){
            var record = this.findRecord(this.valueField, val);
            if(record){
                this.addRecord(record);
            } else if (this.allowAddNewData) {
                var item = new Object; 
                item[this.valueField] = val;
                item[this.displayField] = val;
                
                this.addItem(item);
            }
        },this);
        
    },

The most severe problem is that when doing a load, I loose the ability to open the drop down via the drop button BUT the down arrow still works and the hold left click near the last item will also bring the list down as long as the left mouse button is clicked.

From tracing, it seems that it goes into the function twice and self closes. I'm stuck on that one.




[edit]
Figured out my last issue ..

        this.buttonExpand.addClassOnOver('x-superboxselect-btn-over').on('click', function(e) {
            e.stopEvent();
            if (this.disabled) {
                return;
            }
            if (this.isExpanded()) {
                return;
                //this.multiSelectMode = false;
            } else if (this.pinList) {
                this.multiSelectMode = true;
            }
            this.onTriggerClick();
        }, this);

It seems that the the click event was being called multiple times - so the first click would show the drop down and then the second click would close it. The reason it worked on the demo was the click was being called 3 times, so it was remaining open.

Test code .. yeah .. its so nested in my little application, but here is me loading the SuperBoxSelect after a BasicForm.Load

            var cmb = Ext.getCmp('cmb_Skill');
            if (cmb) { if (JSON.Skill) { var JSONrec = JSON.Skill; if (cmb) cmb.store.loadRecords(cmb.store.reader.readRecords(JSONrec),false); } cmb.setDisabled(!JSON.Skill); if (clearValues) cmb.reset(); else {
                var cmbV = cmb.getValue();
                cmb.lastSelectionText = cmbV;
                if(cmb.hiddenField){
                    cmb.hiddenField.value = cmbV;
                }
                cmb.setValue( cmbV );
            }}

My SuperBoxSelect ..

{xtype:'superboxselect', id:'cmb_Skill', name:'cmb_Skill',  hiddenName:'Skill', fieldLabel:'Skill', allowBlank:false,mode:'local',displayField:'Skillname' ,valueField:'Skillvalue',store: new Ext.data.SimpleStore({fields:['Linkvalue','Skillvalue','Skillname'], data:MyArea.BLANK}) , lastQuery:''}

[mystix]

@MarkBOneSmart, you should probably post the test code you used so everyone else can carry on debugging from where you left off.

[danh2000]

@MarkBOneSmart Thanks for reporting the problems, but I'm on a deadline at the moment and it will take some time to setup a test environment to replicate what you are doing. Unless you have a public facing demo that I can debug it will take me a few days before I can respond.

Cheers,

Dan

[kveeiv]

This is a great component!

I've found it helpful to also be able to pass in an array of values to setValue (instead of having to join() just for the value to be re-split()), so I made the following change:

    setValue: function(value){
    	var values = Ext.isArray(value) ? value : ((typeof value == "string") ? value.split(this.valueDelimiter) : []);
    	this.removeAllItems().resetStore();
    	....