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

[stever]

@stever

Do you have an example or can you elaborate on the getRawValue and beforeblur issues that you experienced - I actually haven't looked at or thought too much about getRawValue and how it should work - as this component has multiple values it's not quite the same as combo - if you (or anyone) has thoughts or suggestions, I'd appreciate hearing them.

Try using the newest version of Ext 3 from SVN (maybe RC2). I think you will see that the fields go blank on blur. Not such a great user experience!

Anyhow, when content is changed (valid data that is), a hidden field ought to be updated with the value, and getRawValue would just return that.

[danh2000]

Try using the newest version of Ext 3 from SVN (maybe RC2). I think you will see that the fields go blank on blur. Not such a great user experience!

Anyhow, when content is changed (valid data that is), a hidden field ought to be updated with the value, and getRawValue would just return that.

Steve, I can't reproduce your blur issue - it's possible there is a bug or regression in the version of Ext 3 you are using - the recent RC 2 release actually fixed a couple of bugs that occured with this component and RC 1.1.

Your description of how you think getRawValue should work is exactly how getValue currently works - valid values are stored, and when getValue is called it returns those values (delimited).

Your suggestion is also different to how ComboBox (well Field actually) works - the getRawValue method returns the current value of the input el whether valid or not.

Obviously the biggest difference between this component and ComboBox is that there are multiple values - the input el is less relevant from a raw value point of view - it will always be different to the underlying value of the component when selection/s have been made which brings me to the dilemma of what getRawValue should return.

If you have use case/s with example data that explains your thoughts better, I'll be more than happy to have a look.

Thanks,

Dan

[mjlecomte]

Try using the newest version of Ext 3 from SVN (maybe RC2). I think you will see that the fields go blank on blur.

I haven't tested / tried this ux, but you may be interested in this thread:
http://extjs.com/forum/showthread.ph...650#post337650

[radtad]

I'm trying to use the SuperSelectBox with Ext 2.2 in a form and this is basically what I'm doing. I'm disabling the form while the data is updating the form then enabling the form. This causes problems with the box.

1. I cannot use Box.addItem() as you can't set the value if the form is disabled. Don't you think there should be an override feature? Or maybe it really shouldn't be checking for disabled. I would assume the only way in setting a value (if the person is the end user) is through some sort of button. I think the button should be checking for a disabled form rather then in the addItem function....just my thoughts.

2. I cannot use the following config at all.

renderFieldBtns: false

form disabled (it will not generate the form window)...

this.buttonClear is undefined
this.buttonClear.removeAllListeners();
SuperBoxSelect.js (line 216)
this.buttonClear is undefined
this.buttonClear.addClassOnOver('x-superboxselect-btn-over')

form enabled (everything seems fine, but it won't do addItem)...

this.buttonClear is undefined
this.buttonClear.addClassOnOver('x-superboxselect-btn-over')

[radtad]

@radtad - some good suggestions thanks - I'll consider adding them. I'm not sure I see the use case for mid-word pattern matching (if I understand you correctly), but I like the others.

Let's see if I can give you an example:

I have a name "Chris" I'm trying to find because that's what he told me his name is. But his first name is actually "John" and his middle name is "Chris". So the display field would normally be {First Name} {Middle Name} {Last Name} i.e. "John Chris Doe". With no mid-word pattern matching available, if I didn't know Chris' real name was John, I'd never get his name as a return match.


A big use case for our company comes down to email addresses. Currently I have "Tad Johnston (rad)" as the display field, "rad" being the email address. A lot of people here often times do not know the person's actual name, but they always know their email address because it's something they see often. Now, if I don't have mid-word pattern matching I can never find "rad".

Another suggestion which would be even better would be matching on more then just the displayField, possibly in the store. Then I wouldn't have to worry about mid word pattern matching whatsoever.

Hope this makes sense....

[danh2000]

@radtad, thanks for the reports.

I'm trying to use the SuperSelectBox with Ext 2.2 in a form and this is basically what I'm doing. I'm disabling the form while the data is updating the form then enabling the form. This causes problems with the box.

1. I cannot use Box.addItem() as you can't set the value if the form is disabled. Don't you think there should be an override feature? Or maybe it really shouldn't be checking for disabled. I would assume the only way in setting a value (if the person is the end user) is through some sort of button. I think the button should be checking for a disabled form rather then in the addItem function....just my thoughts.

Maybe I shouldn't check for the disabled state when programatically interacting with the component - I'll have a look at the other Ext form controls and follow suit.

2. I cannot use the following config at all.

renderFieldBtns: false

form disabled (it will not generate the form window)...

this.buttonClear is undefined
this.buttonClear.removeAllListeners();
SuperBoxSelect.js (line 216)
this.buttonClear is undefined
this.buttonClear.addClassOnOver('x-superboxselect-btn-over')

Thanks, in the onDisable method, the call to removeButtonEvents should have been wrapped like so:

        if(this.renderFieldBtns){
            this.removeButtonEvents();
        } 

form enabled (everything seems fine, but it won't do addItem)...

this.buttonClear is undefined
this.buttonClear.addClassOnOver('x-superboxselect-btn-over')

I can't re-create this - I've set disabled to false and used addItem without issues.

If you are still having problems, please post a link to a working example, or copy and paste code that I can use to reproduce the error.

Thanks again,

Dan

[danh2000]

Let's see if I can give you an example:

I have a name "Chris" I'm trying to find because that's what he told me his name is. But his first name is actually "John" and his middle name is "Chris". So the display field would normally be {First Name} {Middle Name} {Last Name} i.e. "John Chris Doe". With no mid-word pattern matching available, if I didn't know Chris' real name was John, I'd never get his name as a return match.


A big use case for our company comes down to email addresses. Currently I have "Tad Johnston (rad)" as the display field, "rad" being the email address. A lot of people here often times do not know the person's actual name, but they always know their email address because it's something they see often. Now, if I don't have mid-word pattern matching I can never find "rad".

Another suggestion which would be even better would be matching on more then just the displayField, possibly in the store. Then I wouldn't have to worry about mid word pattern matching whatsoever.

Hope this makes sense....

Thanks, It makes sense - I think matching against all store fields would be the best way - I'll see what the effort would be and add it to the list of nice to have's.

[danh2000]

I haven't tested / tried this ux, but you may be interested in this thread:
http://extjs.com/forum/showthread.ph...650#post337650

Thanks for the link Michael, I couldn't reproduce the issue myself - I think it's fixed with the current SVN codebase..

[radtad]

Thanks, It makes sense - I think matching against all store fields would be the best way - I'll see what the effort would be and add it to the list of nice to have's.

I just added a bit of code to do mid-word pattern matching for the SuperBoxSelect from the previous facebook like box select I added there as well (you essentially have to override doQuery):

    anyMatch: true,
    caseSensitive: false,
    createValueMatcher: function(value) {
        console.log('createValueMatcher...'+value);
        if (Ext.isEmpty(value, false)) {
            return new RegExp('^');
        }
        value = Ext.escapeRe(String(value));
        return new RegExp((this.anyMatch === true ? '' : '^') + '(' + Ext.escapeRe(value) + ')', this.caseSensitive ? '' : 'i');
    },
    prepareData : function(data) {
        var result = Ext.apply({}, data);
        result[this.displayField] = data[this.displayField].replace(this.createValueMatcher(this.getRawValue()), function(a, b){
            if (typeof b != 'string') {
                return '';
            }
            return '<span class="ext-combo-match">' + b + '</span>';
        });
        return result;
    },

    initList : function() {
            Ext.ux.form.SuperBoxSelect.superclass.initList.apply(this, arguments);
            this.view.prepareData = this.prepareData.createDelegate(this);
    },

    doQuery : function(q, forceAll) {
            if(q === undefined || q === null) {
                q = '';
            }
            var qe = {
                query: q,
                forceAll: forceAll,
                combo: this,
                key: ";"
            };
            if (this.fireEvent('beforequery', qe)===false || qe.cancel) {
                return false;
            }
            q = qe.query;
            forceAll = qe.forceAll;
            if (forceAll === true || (q.length >= this.minChars)) {
                if(this.lastQuery !== q){
                    this.lastQuery = q;
                    if(this.mode == 'local'){
                        this.selectedIndex = -1;
                        if(forceAll){
                            this.store.clearFilter();
                        } else {
                            this.store.filter(this.displayField, q, this.anyMatch);
                        }
                        this.onLoad();
                    } else {
                        this.store.baseParams[this.queryParam] = q;
                        this.store.load({
                            params: this.getParams(q)
                        });
                        this.expand();
                    }
                } else {
                    this.selectedIndex = -1;
                    this.onLoad();
                }
            }
        },

By the way, thanks for the quick response and nice work on the box! Much faster and cleaner than the original.

[danh2000]

@radtad,

Nice - why don't you make it a standalone plugin, that way you could plug the functionality into SuperBoxSelect, or ComboBox or any component that extends ComboBox.