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

[mishanian]

Sorry Again,
Actually it is working fine with UTF8
but I have another question.
I want to use this in a FORM that this FORM is not generated by Ext JS and it is a normal form.
I mean I want to have just INPUT Box with your brilliant SuperBoxSelect.
Is it possible?

Thanks,
Mehran

[sanjshah]

Hi Dan,

Is it possible to use this with a applyTo?

I have a existing standard form, I think this is also what Mehran is asking.

Thanks!

[danh2000]

@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.

@mishanian, @sanjshah: I'm not sure applyTo is particularly relevent for a combo is it? Maybe transform is more relevant to transform an existing HTML select?

Perhaps you could supply a use case if it helps to clarify.

Thanks,

Dan

[galdaka]

@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.

@mishanian, @sanjshah: I'm not sure applyTo is particularly relevent for a combo is it? Maybe transform is more relevant to transform an existing HTML select?

Perhaps you could supply a use case if it helps to clarify.

Thanks,

Dan

Hi,

I think that "transform" option would be great.

    var converted = new Ext.form.SuperComboBox({        
typeAhead: true,        
triggerAction: 'all',        
transform:'state',        
width:135,        
forceSelection:true    
}); 

Greetings,

[danh2000]

Hi,

I think that "transform" option would be great.

    var converted = new Ext.form.SuperComboBox({        
typeAhead: true,        
triggerAction: 'all',        
transform:'state',        
width:135,        
forceSelection:true    
}); 

Greetings,

I'll add it to the requirements list - I suppose the clsField and styleField data could come from any existing style and class definition within the Option elements too....

Leave it with me - Thanks.

[sanjshah]

Dan,

I'm not sure how the Transform works, but I can use the extension but cannot get it to pass the value to another form on, I've tried the change, newitemdata, additem, for some reason it works in IE but not Firefox.

Also when I use the newitemdata, the first/selected value is not passed only the previous values, am I doing something wrong?

<script type="text/javascript"> 
    var tempIdCounter = 0;
    
    Ext.onReady(function() {
 
        Ext.QuickTips.init();
        
        var tagStore = new Ext.data.SimpleStore({
            fields: ['id', 'name'],
            data: [['ID1','Name1'],['ID2','Name2'],['ID3','Name3'],['ID4','Name4'],['ID5','Name5'],['ID6','Name6']],
            sortInfo: {field: 'name', direction: 'ASC'}
        });
        
        var form2 = new Ext.form.FormPanel({
            id:'f2Form',
            renderTo: 'f2',
            title:'Email Recipients',
            autoHeight: true,
            bodyStyle: 'padding:10px;',
            width: 650,
            items: [{
                allowBlank:false,
                msgTarget: 'under',
                allowAddNewData: true,
                id:'selector2',
                xtype:'superboxselect',
                emptyText: 'Select Users to Email',
                resizable: true,
                name: 'tags',
                anchor:'100%',
                store: tagStore,
                mode: 'local',
                displayField: 'name',
                valueField: 'id',
                extraItemCls: 'x-tag',
                listeners: {
                    beforeadditem: function(bs,v){
                    },
                    additem: function(bs,v){
                        form1.emails.value = Ext.getCmp('selector2').getValue();
                    },
                    beforeremoveitem: function(bs,v){
                    },
                    removeitem: function(bs,v){
                        //form1.emails.value = Ext.getCmp('selector2').getValue();
                    },
                    change: function(bs,v){
                        form1.emails.value = v;
                    },
                    newitemdata: function(bs,v){
                        v = v.slice(0,1).toUpperCase() + v.slice(1).toLowerCase();
                        var newObj = {
                            id: v,
                            name: v
                        };
                        bs.addItem(newObj);
                    }
                }
             }
            ],
            buttons: [{
                text: "Add Existing Tag (addItem)",
                scope: this,
                handler: function(){
                    Ext.getCmp('selector2').addItem({id:'Travel', name:'Travel'});
                }
            },{
                text: "Add New Tag (addItem)",
                scope: this,
                handler: function(){
                    Ext.getCmp('selector2').addItem({id:'Beauty', name:'Beauty'});
                }
            },{
                text: "Set New Values (setValueEx)",
                scope: this,
                handler: function(){
                    Ext.getCmp('selector2').setValueEx([{id:'Finance', name:'Finance'},{id:'Gardening', name:'Gardening'}]);
                }
            },{
                text: "reset",
                scope: this,
                handler: function(){
                    Ext.getCmp('selector2').reset();
                }
            }]
        });
        
    });
</script> 

Regards,

Sanj

[danh2000]

Sanj,

Sorry, I'm not sure if I understood fully...

There was a bug in firing the 'additem' event in my addRecord method, the final 2 lines of code should be in this order:

this.addItemBox(val,display,caption,cls,style);
this.fireEvent('additem',this,val); 

Try changing the above and trying the additem and/or change listeners.

If you are still experiencing problems please paste code (a full working page with both forms would help) and step by step instructions with expected results.

Thanks,

Dan

[sanjshah]

Thanks Dan,

That's perfect!

Regards,

Sanj,

Sorry, I'm not sure if I understood fully...

There was a bug in firing the 'additem' event in my addRecord method, the final 2 lines of code should be in this order:

this.addItemBox(val,display,caption,cls,style);
this.fireEvent('additem',this,val); 

Try changing the above and trying the additem and/or change listeners.

If you are still experiencing problems please paste code (a full working page with both forms would help) and step by step instructions with expected results.

Thanks,

Dan

[stever]

I think the code find and alter the containing form could be done differently. I was thinking of using the HtmlEditor as an example. It keeps a form field hidden and syncs the content back to the hidden field on keypress and other things that change the content. I think this might work here as well. The getRawValue currently doesn't work, and beforeblur calls it, causing all sorts of issues. Not sure why it doesn't in your examples though...

Anyhow, nice extension! I can help with a sync system if you like...

[xantus]

Stellar work!