1. #211
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    Another problem that I detected is that once an item gets the focus it never loses that css again:

    3.JPG

  2. #212
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    Quote Originally Posted by Grolubao View Post
    Another problem that I detected is that once an item gets the focus it never loses that css again:

    Attachment 21135
    Does this css problem happen to anyone else?

  3. #213
    Sencha User
    Join Date
    Apr 2009
    Posts
    40
    Vote Rating
    -2
    polydyne has a little shameless behaviour in the past

      0  

    Default


    Hello,
    We have recently upgraded from Ext 3.0 to 3.2.1 and everything seems to be working fine ofcourse not without a few changes. However with superboxselect user extension we are seeing some weird behavior. It worked fine with previous ext version.

    We have 2 superboxselectboxes on a filter window. e.g. filter by part number and filter by commodity.. now when u open the filter window for the first time both the boxes work and you can see the selections and change the selections etc. but then you filter the records and open the filter window again, the first selected superbox does not expand any more. the other superbox works fine.

    I am attaching the code here, please take a look and help me out here.. thanks much.

    Here is how I am opening the filter window..
    Code:
    handler: function(){
                                    if (!filterWin) {
                                            filterWin = new Ext.Window({
                                                title: 'Awards Filter',
                                                width: 500,
                                                autoHeight: true,
                                                closeAction:'hide',
                                                border: true,
                                                bodyBorder: false,
                                                autoScroll: true,
                                                modal: true,
                                                bodyStyle:'padding:5px 5px  5px 5px',
                                                items:  [awardsFilterFormPanel],
                                                layout: 'form'
                                            });
                                        }
                                        filterWin.show();
                                        filterWin.center();
                                }
    Here is my awardsFilterFormPanel..
    Code:
    var awardsFilterFormPanel = new Ext.FormPanel({
                id:'awardsFilterForm',
                frame:true,
                autoHeight: true,
                items: [
                    {
                        allowBlank: true,
                        id:'display_parts_combo',
                        xtype:'combo',
                        fieldLabel: 'View By',
                        resizable: true,
                        name: 'display_parts_combo',
                        width: 350,
                        store: displayPartsStore,
                        mode: 'local',
                        triggerAction: 'all',
                        displayField: 'value',
                        hiddenName:'id',
                        valueField: 'id',
                        forceSelection : true,
                        allowBlank: false,
                        value:'<%=displayPartsId%>'
                    },
                    {
                        allowBlank: true,
                        id:'filter_part_number_combo',
                        xtype:'superboxselect',
                        fieldLabel: 'Part Numbers',
                        emptyText: 'Select Part Number',
                        resizable: true,
                        name: 'filter_part_number_combo',
                        width: 350,
                        store: partsStore,
                        mode: 'local',
                        displayField: 'part_name',
                        displayFieldTpl: '{part_name}',
                        valueField: 'part_id',
                        forceSelection: true,
                        value: '<%=partSelections%>'
                    },
                    {
                        allowBlank: true,
                        id:'filter_commodity_combo',
                        xtype:'superboxselect',
                        fieldLabel: 'Commodities',
                        emptyText: 'Select Commodity',
                        resizable: true,
                        name: 'filter_commodity_combo',
                        width: 350,
                        store: filterCommodityComboStore,
                        mode: 'local',
                        displayField: 'commodity_code',
                        displayFieldTpl: '{commodity_code}',
                        valueField: 'commodity_id',
                        forceSelection : true,
                        value: '<%=commSelections%>'
                    },
                    {
                        xtype: 'checkbox',
                        id: 'chk_sub_commodities',
                        fieldLabel: 'Include Sub Commodities',
                        boxLabel: '',
                        name: 'chk_sub_commodities',
                        checked:  <%=includeSubCommodities.booleanValue()%>
                    }],
                    buttons: [
                        {xtype: 'tbfill'},
                        {
                            text: 'Filter',
                            formBind: true,
                            handler: function(){
                                if(true){
                                    awardsFilterFormPanel.getForm().submit({
                                        url:  '<%=awardsFilterFormUrl%>',
                                        method: 'POST',
                                        waitMsg: '<%=waitMsgStr%>',
                                        success: function(form, action){
                                            awardsPricingStore.reload();
                                            filterWin.hide();
                                        },
                                        failure: function(form, action){
                                            //TO DO:
                                            //add failure code
                                        }
                                    });
                                }
                            }
                        },
                        {
                            text: 'Reset Filter',
                            formBind: true,
                            handler: function(){
                                {
                                    var conn = new Ext.data.Connection();
                                    conn.request({
                                        waitMsg: '<%=waitMsgStr%>',
                                        url:  '<%=resetAwardsFilterURL%>',
                                        method: 'POST',
                                        callback:  function(opt,success,responseObj){
                                            if (success) {
                                                var responseData =  Ext.util.JSON.decode(responseObj.responseText);
                                                if ( responseData.success ==  true ) {
                                                     awardsFilterFormPanel.getForm().reset();
                                                     Ext.getCmp('filter_commodity_combo').clearValue();
                                                     Ext.getCmp('chk_sub_commodities').setValue('false');
                                                     awardsPricingStore.reload();
                                                    filterWin.hide();
                                                }
                                            } else {
                                                Ext.Msg.alert('Error',  'Filter could not be reset, Please try again!');
                                            }
                                        }
                                 });
                                }
                            }
                        },
                        {
                            text: 'Cancel',
                            handler: function(){
                                filterWin.hide();
                            }
                        }]
            });
    The issue may be is something to do with z-index value rendered by ext..

  4. #214
    Sencha User
    Join Date
    Jun 2008
    Posts
    2
    Vote Rating
    0
    ash11tw is on a distinguished road

      0  

    Default


    Just for someone who need to use it in editorgrid in Ext 3.2.1
    I have a simple workaround for making it work. (may have a better way)
    First, you need to overwrite assertValue() to a empty function, because assertValue uses getRawValue() to verify the value and it seems like getRawValue() won't work in this component.
    Second, You need to remove the css class ".ext-strict .x-small-editor .x-form-text" since it restricts the height of field to 16px.

  5. #215
    Sencha User dorgan's Avatar
    Join Date
    Dec 2007
    Location
    Cocoa, FL
    Posts
    286
    Vote Rating
    -1
    dorgan is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by Grolubao View Post
    Does this css problem happen to anyone else?

    Yes I am also experiencing the problem in Firefox 3.6.6

  6. #216
    Sencha User dorgan's Avatar
    Join Date
    Dec 2007
    Location
    Cocoa, FL
    Posts
    286
    Vote Rating
    -1
    dorgan is an unknown quantity at this point

      0  

    Default Fixed Items always having focus

    Fixed Items always having focus


    OK for some reason I am not able to directly attach a JS file to this post but here is the fixed version. Apparently when adding a class for hover you can only add 1. originally that line read:
    Code:
    this.el.addClassOnOver('x-superboxselect-item x-superboxselect-item-hover');
    So I changed it to:

    Code:
    this.el.addClassOnOver('x-superboxselect-item-hover');
    I just started using this UX today so I figured I would contribute a little.

    Code:
    Ext.namespace('Ext.ux.form'); 
    /** 
     * <p>SuperBoxSelect is an extension of the ComboBox component that displays selected items as labelled boxes within the form field. As seen on facebook, hotmail and other sites.</p> 
     * <p>The SuperBoxSelect component was inspired by the BoxSelect component found here: http://efattal.fr/en/extjs/extuxboxselect/</p> 
     *  
     * @author <a href="mailto:dan.humphrey@technomedia.co.uk">Dan Humphrey</a> 
     * @class Ext.ux.form.SuperBoxSelect 
     * @extends Ext.form.ComboBox 
     * @constructor 
     * @component 
     * @version 1.0 
     * @license TBA (To be announced) 
     *  
     */ 
    Ext.ux.form.SuperBoxSelect = function(config) { 
        Ext.ux.form.SuperBoxSelect.superclass.constructor.call(this,config); 
        this.addEvents( 
            /** 
             * Fires before an item is added to the component via user interaction. Return false from the callback function to prevent the item from being added. 
             * @event beforeadditem 
             * @memberOf Ext.ux.form.SuperBoxSelect 
             * @param {SuperBoxSelect} this 
             * @param {Mixed} value The value of the item to be added 
             */ 
            'beforeadditem', 
     
            /** 
             * Fires after a new item is added to the component. 
             * @event additem 
             * @memberOf Ext.ux.form.SuperBoxSelect 
             * @param {SuperBoxSelect} this 
             * @param {Mixed} value The value of the item which was added 
             * @param {Record} record The store record which was added 
             */ 
            'additem', 
     
            /** 
             * Fires when the allowAddNewData config is set to true, and a user attempts to add an item that is not in the data store. 
             * @event newitem 
             * @memberOf Ext.ux.form.SuperBoxSelect 
             * @param {SuperBoxSelect} this 
             * @param {Mixed} value The new item's value 
             */ 
            'newitem', 
     
            /** 
             * Fires when an item's remove button is clicked. Return false from the callback function to prevent the item from being removed. 
             * @event beforeremoveitem 
             * @memberOf Ext.ux.form.SuperBoxSelect 
             * @param {SuperBoxSelect} this 
             * @param {Mixed} value The value of the item to be removed 
             */ 
            'beforeremoveitem', 
     
            /** 
             * Fires after an item has been removed. 
             * @event removeitem 
             * @memberOf Ext.ux.form.SuperBoxSelect 
             * @param {SuperBoxSelect} this 
             * @param {Mixed} value The value of the item which was removed 
             * @param {Record} record The store record which was removed 
             */ 
            'removeitem', 
            /** 
             * Fires after the component values have been cleared. 
             * @event clear 
             * @memberOf Ext.ux.form.SuperBoxSelect 
             * @param {SuperBoxSelect} this 
             */ 
            'clear' 
        ); 
         
    }; 
    /** 
     * @private hide from doc gen 
     */ 
    Ext.ux.form.SuperBoxSelect = Ext.extend(Ext.ux.form.SuperBoxSelect,Ext.form.ComboBox,{ 
        /** 
         * @cfg {Boolean} allowAddNewData When set to true, allows items to be added (via the setValueEx and addItem methods) that do not already exist in the data store. Defaults to false. 
         */ 
        allowAddNewData: false, 
     
        /** 
         * @cfg {Boolean} backspaceDeletesLastItem When set to false, the BACKSPACE key will focus the last selected item. When set to true, the last item will be immediately deleted. Defaults to true. 
         */ 
        backspaceDeletesLastItem: true, 
     
        /** 
         * @cfg {String} classField The underlying data field that will be used to supply an additional class to each item. 
         */ 
        classField: null, 
     
        /** 
         * @cfg {String} clearBtnCls An additional class to add to the in-field clear button. 
         */ 
        clearBtnCls: '', 
     
        /** 
         * @cfg {String/XTemplate} displayFieldTpl A template for rendering the displayField in each selected item. Defaults to null. 
         */ 
        displayFieldTpl: null, 
     
        /** 
         * @cfg {String} extraItemCls An additional css class to apply to each item. 
         */ 
        extraItemCls: '', 
     
        /** 
         * @cfg {String/Object/Function} extraItemStyle Additional css style(s) to apply to each item. Should be a valid argument to Ext.Element.applyStyles. 
         */ 
        extraItemStyle: '', 
     
        /** 
         * @cfg {String} expandBtnCls An additional class to add to the in-field expand button. 
         */ 
        expandBtnCls: '', 
     
        /** 
         * @cfg {Boolean} fixFocusOnTabSelect When set to true, the component will not lose focus when a list item is selected with the TAB key. Defaults to true. 
         */ 
        fixFocusOnTabSelect: true, 
         
         /** 
         * @cfg {Boolean} forceFormValue When set to true, the component will always return a value to the parent form getValues method, and when the parent form is submitted manually. Defaults to false, meaning the component will only be included in the parent form submission (or getValues) if at least 1 item has been selected.   
         */ 
        forceFormValue: true, 
        /** 
         * @cfg {Number} itemDelimiterKey The key code which terminates keying in of individual items, and adds the current 
         * item to the list. Defaults to the ENTER key. 
         */ 
        itemDelimiterKey: Ext.EventObject.ENTER,     
        /** 
         * @cfg {Boolean} navigateItemsWithTab When set to true the tab key will navigate between selected items. Defaults to true. 
         */ 
        navigateItemsWithTab: true, 
     
        /** 
         * @cfg {Boolean} pinList When set to true the select list will be pinned to allow for multiple selections. Defaults to true. 
         */ 
        pinList: true, 
     
        /** 
         * @cfg {Boolean} preventDuplicates When set to true unique item values will be enforced. Defaults to true. 
         */ 
        preventDuplicates: true, 
         
        /** 
         * @cfg {String} queryValuesDelimiter Used to delimit multiple values queried from the server when mode is remote. 
         */ 
        queryValuesDelimiter: '|', 
         
        /** 
         * @cfg {String} queryValuesIndicator A request variable that is sent to the server (as true) to indicate that we are querying values rather than display data (as used in autocomplete) when mode is remote. 
         */ 
        queryValuesIndicator: 'valuesqry', 
     
        /** 
         * @cfg {Boolean} removeValuesFromStore When set to true, selected records will be removed from the store. Defaults to true. 
         */ 
        removeValuesFromStore: true, 
     
        /** 
         * @cfg {String} renderFieldBtns When set to true, will render in-field buttons for clearing the component, and displaying the list for selection. Defaults to true. 
         */ 
        renderFieldBtns: true, 
     
        /** 
         * @cfg {Boolean} stackItems When set to true, the items will be stacked 1 per line. Defaults to false which displays the items inline. 
         */ 
        stackItems: false, 
     
        /** 
         * @cfg {String} styleField The underlying data field that will be used to supply additional css styles to each item. 
         */ 
        styleField : null, 
         
         /** 
         * @cfg {Boolean} supressClearValueRemoveEvents When true, the removeitem event will not be fired for each item when the clearValue method is called, or when the clear button is used. Defaults to false. 
         */ 
        supressClearValueRemoveEvents : false, 
         
        /** 
         * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable automatic validation (defaults to 'blur'). 
         */ 
        validationEvent : 'blur', 
         
        /** 
         * @cfg {String} valueDelimiter The delimiter to use when joining and splitting value arrays and strings. 
         */ 
        valueDelimiter: ',', 
        initComponent:function() { 
           Ext.apply(this, { 
                items           : new Ext.util.MixedCollection(false), 
                usedRecords     : new Ext.util.MixedCollection(false), 
                addedRecords    : [], 
                remoteLookup    : [], 
                hideTrigger     : true, 
                grow            : false, 
                resizable       : false, 
                multiSelectMode : false, 
                preRenderValue  : null 
            }); 
             
            if(this.transform){ 
                this.doTransform(); 
            } 
            if(this.forceFormValue){ 
                this.items.on({ 
                   add: this.manageNameAttribute, 
                   remove: this.manageNameAttribute, 
                   clear: this.manageNameAttribute, 
                   scope: this 
                }); 
            } 
             
            Ext.ux.form.SuperBoxSelect.superclass.initComponent.call(this); 
            if(this.mode === 'remote' && this.store){ 
                this.store.on('load', this.onStoreLoad, this); 
            } 
        }, 
        onRender:function(ct, position) { 
            var h = this.hiddenName; 
            this.hiddenName = null; 
            Ext.ux.form.SuperBoxSelect.superclass.onRender.call(this, ct, position); 
            this.hiddenName = h; 
            this.manageNameAttribute(); 
            
            var extraClass = (this.stackItems === true) ? 'x-superboxselect-stacked' : ''; 
            if(this.renderFieldBtns){ 
                extraClass += ' x-superboxselect-display-btns'; 
            } 
            this.el.removeClass('x-form-text').addClass('x-superboxselect-input-field'); 
             
            this.wrapEl = this.el.wrap({ 
                tag : 'ul' 
            }); 
             
            this.outerWrapEl = this.wrapEl.wrap({ 
                tag : 'div', 
                cls: 'x-form-text x-superboxselect ' + extraClass 
            }); 
            
            this.inputEl = this.el.wrap({ 
                tag : 'li', 
                cls : 'x-superboxselect-input' 
            }); 
             
            if(this.renderFieldBtns){ 
                this.setupFieldButtons().manageClearBtn(); 
            } 
             
            this.setupFormInterception(); 
        }, 
        onStoreLoad : function(store, records, options){ 
            //accomodating for bug in Ext 3.0.0 where options.params are empty 
            var q = options.params[this.queryParam] || store.baseParams[this.queryParam] || "", 
                isValuesQuery = options.params[this.queryValuesIndicator] || store.baseParams[this.queryValuesIndicator]; 
             
            if(this.removeValuesFromStore){ 
                this.store.each(function(record) { 
                    if(this.usedRecords.containsKey(record.get(this.valueField))){ 
                        this.store.remove(record); 
                    } 
                }, this); 
            } 
            //queried values 
            if(isValuesQuery){ 
                var params = q.split(this.queryValuesDelimiter); 
                Ext.each(params,function(p){ 
                    this.remoteLookup.remove(p); 
                    var rec = this.findRecord(this.valueField,p); 
                    if(rec){ 
                        this.addRecord(rec); 
                    } 
                },this); 
                 
                if(this.setOriginal){ 
                    this.setOriginal = false; 
                    this.originalValue = this.getValue(); 
                } 
            } 
     
            //queried display (autocomplete) & addItem 
            if(q !== '' && this.allowAddNewData){ 
                Ext.each(this.remoteLookup,function(r){ 
                    if(typeof r == "object" && r[this.displayField] == q){ 
                        this.remoteLookup.remove(r); 
                        if(records.length && records[0].get(this.displayField) === q) { 
                            this.addRecord(records[0]); 
                            return; 
                        } 
                        var rec = this.createRecord(r); 
                        this.store.add(rec); 
                        this.addRecord(rec); 
                        this.addedRecords.push(rec); //keep track of records added to store 
                        (function(){ 
                            if(this.isExpanded()){ 
                                this.collapse(); 
                            } 
                        }).defer(10,this); 
                        return; 
                    } 
                },this); 
            } 
             
            var toAdd = []; 
            if(q === ''){ 
                Ext.each(this.addedRecords,function(rec){ 
                    if(this.preventDuplicates && this.usedRecords.containsKey(rec.get(this.valueField))){ 
                        return;                     
                    } 
                    toAdd.push(rec); 
                     
                },this); 
                 
            }else{ 
                var re = new RegExp(Ext.escapeRe(q) + '.*','i'); 
                Ext.each(this.addedRecords,function(rec){ 
                    if(this.preventDuplicates && this.usedRecords.containsKey(rec.get(this.valueField))){ 
                        return;                     
                    } 
                    if(re.test(rec.get(this.displayField))){ 
                        toAdd.push(rec); 
                    } 
                },this); 
            } 
            this.store.add(toAdd); 
            this.store.sort(this.displayField, 'ASC'); 
             
            if(this.store.getCount() === 0 && this.isExpanded()){ 
                this.collapse(); 
            } 
             
        }, 
        doTransform : function() { 
            var s = Ext.getDom(this.transform), transformValues = []; 
                if(!this.store){ 
                    this.mode = 'local'; 
                    var d = [], opts = s.options; 
                    for(var i = 0, len = opts.length;i < len; i++){ 
                        var o = opts[i], oe = Ext.get(o), 
                            value = oe.getAttributeNS(null,'value') || '', 
                            cls = oe.getAttributeNS(null,'className') || '', 
                            style = oe.getAttributeNS(null,'style') || ''; 
                        if(o.selected) { 
                            transformValues.push(value); 
                        } 
                        d.push([value, o.text, cls, typeof(style) === "string" ? style : style.cssText]); 
                    } 
                    this.store = new Ext.data.SimpleStore({ 
                        'id': 0, 
                        fields: ['value', 'text', 'cls', 'style'], 
                        data : d 
                    }); 
                    Ext.apply(this,{ 
                        valueField: 'value', 
                        displayField: 'text', 
                        classField: 'cls', 
                        styleField: 'style' 
                    }); 
                } 
                
                if(transformValues.length){ 
                    this.value = transformValues.join(','); 
                } 
        }, 
        setupFieldButtons : function(){ 
            this.buttonWrap = this.outerWrapEl.createChild({ 
                cls: 'x-superboxselect-btns' 
            }); 
             
            this.buttonClear = this.buttonWrap.createChild({ 
                tag:'div', 
                cls: 'x-superboxselect-btn-clear ' + this.clearBtnCls 
            }); 
             
            this.buttonExpand = this.buttonWrap.createChild({ 
                tag:'div', 
                cls: 'x-superboxselect-btn-expand ' + this.expandBtnCls 
            }); 
             
            this.initButtonEvents(); 
             
            return this; 
        }, 
        initButtonEvents : function() { 
            this.buttonClear.addClassOnOver('x-superboxselect-btn-over').on('click', function(e) { 
                e.stopEvent(); 
                if (this.disabled) { 
                    return; 
                } 
                this.clearValue(); 
                this.el.focus(); 
            }, this); 
     
            this.buttonExpand.addClassOnOver('x-superboxselect-btn-over').on('click', function(e) { 
                e.stopEvent(); 
                if (this.disabled) { 
                    return; 
                } 
                if (this.isExpanded()) { 
                    this.multiSelectMode = false; 
                } else if (this.pinList) { 
                    this.multiSelectMode = true; 
                } 
                this.onTriggerClick(); 
            }, this); 
        }, 
        removeButtonEvents : function() { 
            this.buttonClear.removeAllListeners(); 
            this.buttonExpand.removeAllListeners(); 
            return this; 
        }, 
        clearCurrentFocus : function(){ 
            if(this.currentFocus){ 
                this.currentFocus.onLnkBlur(); 
                this.currentFocus = null; 
            }   
            return this;         
        }, 
        initEvents : function() { 
            var el = this.el; 
     
            el.on({ 
                click   : this.onClick, 
                focus   : this.clearCurrentFocus, 
                blur    : this.onBlur, 
     
                keydown : this.onKeyDownHandler, 
                keyup   : this.onKeyUpBuffered, 
     
                scope   : this 
            }); 
     
            this.on({ 
                collapse: this.onCollapse, 
                expand: this.clearCurrentFocus, 
                scope: this 
            }); 
     
            this.wrapEl.on('click', this.onWrapClick, this); 
            this.outerWrapEl.on('click', this.onWrapClick, this); 
             
            this.inputEl.focus = function() { 
                el.focus(); 
            }; 
     
            Ext.ux.form.SuperBoxSelect.superclass.initEvents.call(this); 
     
            Ext.apply(this.keyNav, { 
                tab: function(e) { 
                    if (this.fixFocusOnTabSelect && this.isExpanded()) { 
                        e.stopEvent(); 
                        el.blur(); 
                        this.onViewClick(false); 
                        this.focus(false, 10); 
                        return true; 
                    } 
     
                    this.onViewClick(false); 
                    if (el.dom.value !== '') { 
                        this.setRawValue(''); 
                    } 
     
                    return true; 
                }, 
     
                down: function(e) { 
                    if (!this.isExpanded() && !this.currentFocus) { 
                        this.onTriggerClick(); 
                    } else { 
                        this.inKeyMode = true; 
                        this.selectNext(); 
                    } 
                }, 
     
                enter: function(){} 
            }); 
        }, 
     
        onClick: function() { 
            this.clearCurrentFocus(); 
            this.collapse(); 
            this.autoSize(); 
        }, 
     
        beforeBlur: Ext.form.ComboBox.superclass.beforeBlur, 
     
        onFocus: function() { 
            this.outerWrapEl.addClass(this.focusClass); 
     
            Ext.ux.form.SuperBoxSelect.superclass.onFocus.call(this); 
        }, 
     
        onBlur: function() { 
            this.outerWrapEl.removeClass(this.focusClass); 
     
            this.clearCurrentFocus(); 
     
            if (this.el.dom.value !== '') { 
                this.applyEmptyText(); 
                this.autoSize(); 
            } 
     
            Ext.ux.form.SuperBoxSelect.superclass.onBlur.call(this); 
        }, 
     
        onCollapse: function() { 
            this.view.clearSelections(); 
            this.multiSelectMode = false; 
        }, 
     
        onWrapClick: function(e) { 
            e.stopEvent(); 
            this.collapse(); 
            this.el.focus(); 
            this.clearCurrentFocus(); 
        }, 
        markInvalid : function(msg) { 
            var elp, t; 
     
            if (!this.rendered || this.preventMark ) { 
                return; 
            } 
            this.outerWrapEl.addClass(this.invalidClass); 
            msg = msg || this.invalidText; 
     
            switch (this.msgTarget) { 
                case 'qtip': 
                    Ext.apply(this.el.dom, { 
                        qtip    : msg, 
                        qclass  : 'x-form-invalid-tip' 
                    }); 
                    Ext.apply(this.wrapEl.dom, { 
                        qtip    : msg, 
                        qclass  : 'x-form-invalid-tip' 
                    }); 
                    if (Ext.QuickTips) { // fix for floating editors interacting with DND 
                        Ext.QuickTips.enable(); 
                    } 
                    break; 
                case 'title': 
                    this.el.dom.title = msg; 
                    this.wrapEl.dom.title = msg; 
                    this.outerWrapEl.dom.title = msg; 
                    break; 
                case 'under': 
                    if (!this.errorEl) { 
                        elp = this.getErrorCt(); 
                        if (!elp) { // field has no container el 
                            this.el.dom.title = msg; 
                            break; 
                        } 
                        this.errorEl = elp.createChild({cls:'x-form-invalid-msg'}); 
                        this.errorEl.setWidth(elp.getWidth(true) - 20); 
                    } 
                    this.errorEl.update(msg); 
                    Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this); 
                    break; 
                case 'side': 
                    if (!this.errorIcon) { 
                        elp = this.getErrorCt(); 
                        if (!elp) { // field has no container el 
                            this.el.dom.title = msg; 
                            break; 
                        } 
                        this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'}); 
                    } 
                    this.alignErrorIcon(); 
                    Ext.apply(this.errorIcon.dom, { 
                        qtip    : msg, 
                        qclass  : 'x-form-invalid-tip' 
                    }); 
                    this.errorIcon.show(); 
                    this.on('resize', this.alignErrorIcon, this); 
                    break; 
                default: 
                    t = Ext.getDom(this.msgTarget); 
                    t.innerHTML = msg; 
                    t.style.display = this.msgDisplay; 
                    break; 
            } 
            this.fireEvent('invalid', this, msg); 
        }, 
        clearInvalid : function(){ 
            if(!this.rendered || this.preventMark){ // not rendered 
                return; 
            } 
            this.outerWrapEl.removeClass(this.invalidClass); 
            switch(this.msgTarget){ 
                case 'qtip': 
                    this.el.dom.qtip = ''; 
                    this.wrapEl.dom.qtip =''; 
                    break; 
                case 'title': 
                    this.el.dom.title = ''; 
                    this.wrapEl.dom.title = ''; 
                    this.outerWrapEl.dom.title = ''; 
                    break; 
                case 'under': 
                    if(this.errorEl){ 
                        Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this); 
                    } 
                    break; 
                case 'side': 
                    if(this.errorIcon){ 
                        this.errorIcon.dom.qtip = ''; 
                        this.errorIcon.hide(); 
                        this.un('resize', this.alignErrorIcon, this); 
                    } 
                    break; 
                default: 
                    var t = Ext.getDom(this.msgTarget); 
                    t.innerHTML = ''; 
                    t.style.display = 'none'; 
                    break; 
            } 
            this.fireEvent('valid', this); 
        }, 
        alignErrorIcon : function(){ 
            if(this.wrap){ 
                this.errorIcon.alignTo(this.wrap, 'tl-tr', [Ext.isIE ? 5 : 2, 3]); 
            } 
        }, 
        expand : function(){ 
            if (this.isExpanded() || !this.hasFocus) { 
                return; 
            } 
            this.list.alignTo(this.outerWrapEl, this.listAlign).show(); 
            this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac 
            Ext.getDoc().on({ 
                mousewheel: this.collapseIf, 
                mousedown: this.collapseIf, 
                scope: this 
            }); 
            this.fireEvent('expand', this); 
        }, 
        restrictHeight : function(){ 
            var inner = this.innerList.dom, 
                st = inner.scrollTop,  
                list = this.list; 
             
            inner.style.height = ''; 
             
            var pad = list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight, 
                h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight), 
                ha = this.getPosition()[1]-Ext.getBody().getScroll().top, 
                hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height, 
                space = Math.max(ha, hb, this.minHeight || 0)-list.shadowOffset-pad-5; 
             
            h = Math.min(h, space, this.maxHeight); 
            this.innerList.setHeight(h); 
     
            list.beginUpdate(); 
            list.setHeight(h+pad); 
            list.alignTo(this.outerWrapEl, this.listAlign); 
            list.endUpdate(); 
             
            if(this.multiSelectMode){ 
                inner.scrollTop = st; 
            } 
        }, 
         
        validateValue: function(val){ 
            if(this.items.getCount() === 0){ 
                 if(this.allowBlank){ 
                     this.clearInvalid(); 
                     return true; 
                 }else{ 
                     this.markInvalid(this.blankText); 
                     return false; 
                 } 
            } 
             
            this.clearInvalid(); 
            return true; 
        }, 
     
        manageNameAttribute :  function(){ 
            if(this.items.getCount() === 0 && this.forceFormValue){ 
               this.el.dom.setAttribute('name', this.hiddenName || this.name); 
            }else{ 
                this.el.dom.removeAttribute('name'); 
            } 
        }, 
        setupFormInterception : function(){ 
            var form; 
            this.findParentBy(function(p){  
                if(p.getForm){ 
                    form = p.getForm(); 
                } 
            }); 
            if(form){ 
                 
                var formGet = form.getValues; 
                form.getValues = function(asString){ 
                    this.el.dom.disabled = true; 
                    var oldVal = this.el.dom.value; 
                    this.setRawValue(''); 
                    var vals = formGet.call(form); 
                    this.el.dom.disabled = false; 
                    this.setRawValue(oldVal); 
                    if(this.forceFormValue && this.items.getCount() === 0){ 
                        vals[this.name] = ''; 
                    } 
                    return asString ? Ext.urlEncode(vals) : vals ; 
                }.createDelegate(this); 
            } 
        }, 
        onResize : function(w, h, rw, rh) { 
            var reduce = Ext.isIE6 ? 4 : Ext.isIE7 ? 1 : Ext.isIE8 ? 1 : 0; 
            if(this.wrapEl){ 
                this._width = w; 
                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(); 
        }, 
        onEnable: function(){ 
            Ext.ux.form.SuperBoxSelect.superclass.onEnable.call(this); 
            this.items.each(function(item){ 
                item.enable(); 
            }); 
            if (this.renderFieldBtns) { 
                this.initButtonEvents(); 
            } 
        }, 
        onDisable: function(){ 
            Ext.ux.form.SuperBoxSelect.superclass.onDisable.call(this); 
            this.items.each(function(item){ 
                item.disable(); 
            }); 
            if(this.renderFieldBtns){ 
                this.removeButtonEvents(); 
            } 
        }, 
        /** 
         * Clears all values from the component. 
         * @methodOf Ext.ux.form.SuperBoxSelect 
         * @name clearValue 
         * @param {Boolean} supressRemoveEvent [Optional] When true, the 'removeitem' event will not fire for each item that is removed.     
         */ 
        clearValue : function(supressRemoveEvent){ 
            Ext.ux.form.SuperBoxSelect.superclass.clearValue.call(this); 
            this.preventMultipleRemoveEvents = supressRemoveEvent || this.supressClearValueRemoveEvents || false; 
            this.removeAllItems(); 
            this.preventMultipleRemoveEvents = false; 
            this.fireEvent('clear',this); 
            return this; 
        }, 
        onKeyUp : function(e) { 
            if (this.editable !== false && (!e.isSpecialKey() || e.getKey() === e.BACKSPACE) && e.getKey() !== this.itemDelimiterKey && (!e.hasModifier() || e.shiftKey)) { 
                this.lastKey = e.getKey(); 
                this.dqTask.delay(this.queryDelay); 
            }         
        }, 
        onKeyDownHandler : function(e,t) { 
                     
            var toDestroy,nextFocus,idx; 
            if ((e.getKey() === e.DELETE || e.getKey() === e.SPACE) && this.currentFocus){ 
                e.stopEvent(); 
                toDestroy = this.currentFocus; 
                this.on('expand',function(){this.collapse();},this,{single: true}); 
                idx = this.items.indexOfKey(this.currentFocus.key); 
                 
                this.clearCurrentFocus(); 
                 
                if(idx < (this.items.getCount() -1)){ 
                    nextFocus = this.items.itemAt(idx+1); 
                } 
                 
                toDestroy.preDestroy(true); 
                if(nextFocus){ 
                    (function(){ 
                        nextFocus.onLnkFocus(); 
                        this.currentFocus = nextFocus; 
                    }).defer(200,this); 
                } 
             
                return true; 
            } 
             
            var val = this.el.dom.value, it, ctrl = e.ctrlKey; 
            if(e.getKey() === this.itemDelimiterKey){ 
                e.stopEvent(); 
                if (val !== "") { 
                    if (ctrl || !this.isExpanded())  {  //ctrl+enter for new items 
                        this.view.clearSelections(); 
                        this.collapse(); 
                        this.setRawValue(''); 
                        this.fireEvent('newitem', this, val); 
                    } 
                    else { 
                        this.onViewClick(); 
                        //removed from 3.0.1 
                        if(this.unsetDelayCheck){ 
                            this.delayedCheck = true; 
                            this.unsetDelayCheck.defer(10, this); 
                        } 
                    } 
                }else{ 
                    if(!this.isExpanded()){ 
                        return; 
                    } 
                    this.onViewClick(); 
                    //removed from 3.0.1 
                    if(this.unsetDelayCheck){ 
                        this.delayedCheck = true; 
                        this.unsetDelayCheck.defer(10, this); 
                    } 
                } 
                return true; 
            } 
             
            if(val !== '') { 
                this.autoSize(); 
                return; 
            } 
             
            //select first item 
            if(e.getKey() === e.HOME){ 
                e.stopEvent(); 
                if(this.items.getCount() > 0){ 
                    this.collapse(); 
                    it = this.items.get(0); 
                    it.el.focus(); 
                     
                } 
                return true; 
            } 
            //backspace remove 
            if(e.getKey() === e.BACKSPACE){ 
                e.stopEvent(); 
                if(this.currentFocus) { 
                    toDestroy = this.currentFocus; 
                    this.on('expand',function(){ 
                        this.collapse(); 
                    },this,{single: true}); 
                     
                    idx = this.items.indexOfKey(toDestroy.key); 
                     
                    this.clearCurrentFocus(); 
                    if(idx < (this.items.getCount() -1)){ 
                        nextFocus = this.items.itemAt(idx+1); 
                    } 
                     
                    toDestroy.preDestroy(true); 
                     
                    if(nextFocus){ 
                        (function(){ 
                            nextFocus.onLnkFocus(); 
                            this.currentFocus = nextFocus; 
                        }).defer(200,this); 
                    } 
                     
                    return; 
                }else{ 
                    it = this.items.get(this.items.getCount() -1); 
                    if(it){ 
                        if(this.backspaceDeletesLastItem){ 
                            this.on('expand',function(){this.collapse();},this,{single: true}); 
                            it.preDestroy(true); 
                        }else{ 
                            if(this.navigateItemsWithTab){ 
                                it.onElClick(); 
                            }else{ 
                                this.on('expand',function(){ 
                                    this.collapse(); 
                                    this.currentFocus = it; 
                                    this.currentFocus.onLnkFocus.defer(20,this.currentFocus); 
                                },this,{single: true}); 
                            } 
                        } 
                    } 
                    return true; 
                } 
            } 
             
            if(!e.isNavKeyPress()){ 
                this.multiSelectMode = false; 
                this.clearCurrentFocus(); 
                return; 
            } 
            //arrow nav 
            if(e.getKey() === e.LEFT || (e.getKey() === e.UP && !this.isExpanded())){ 
                e.stopEvent(); 
                this.collapse(); 
                //get last item 
                it = this.items.get(this.items.getCount()-1); 
                if(this.navigateItemsWithTab){  
                    //focus last el 
                    if(it){ 
                        it.focus();  
                    } 
                }else{ 
                    //focus prev item 
                    if(this.currentFocus){ 
                        idx = this.items.indexOfKey(this.currentFocus.key); 
                        this.clearCurrentFocus(); 
                         
                        if(idx !== 0){ 
                            this.currentFocus = this.items.itemAt(idx-1); 
                            this.currentFocus.onLnkFocus(); 
                        } 
                    }else{ 
                        this.currentFocus = it; 
                        if(it){ 
                            it.onLnkFocus(); 
                        } 
                    } 
                } 
                return true; 
            } 
            if(e.getKey() === e.DOWN){ 
                if(this.currentFocus){ 
                    this.collapse(); 
                    e.stopEvent(); 
                    idx = this.items.indexOfKey(this.currentFocus.key); 
                    if(idx == (this.items.getCount() -1)){ 
                        this.clearCurrentFocus.defer(10,this); 
                    }else{ 
                        this.clearCurrentFocus(); 
                        this.currentFocus = this.items.itemAt(idx+1); 
                        if(this.currentFocus){ 
                            this.currentFocus.onLnkFocus(); 
                        } 
                    } 
                    return true; 
                } 
            } 
            if(e.getKey() === e.RIGHT){ 
                this.collapse(); 
                it = this.items.itemAt(0); 
                if(this.navigateItemsWithTab){  
                    //focus first el 
                    if(it){ 
                        it.focus();  
                    } 
                }else{ 
                    if(this.currentFocus){ 
                        idx = this.items.indexOfKey(this.currentFocus.key); 
                        this.clearCurrentFocus(); 
                        if(idx < (this.items.getCount() -1)){ 
                            this.currentFocus = this.items.itemAt(idx+1); 
                            if(this.currentFocus){ 
                                this.currentFocus.onLnkFocus(); 
                            } 
                        } 
                    }else{ 
                        this.currentFocus = it; 
                        if(it){ 
                            it.onLnkFocus(); 
                        } 
                    } 
                } 
            } 
        }, 
        onKeyUpBuffered : function(e){ 
            if(!e.isNavKeyPress()){ 
                this.autoSize(); 
            } 
        }, 
        reset :  function(){ 
            this.killItems(); 
            Ext.ux.form.SuperBoxSelect.superclass.reset.call(this); 
            this.addedRecords = []; 
            this.autoSize().setRawValue(''); 
        }, 
        applyEmptyText : function(){ 
            this.setRawValue(''); 
            if(this.items.getCount() > 0){ 
                this.el.removeClass(this.emptyClass); 
                this.setRawValue(''); 
                return this; 
            } 
            if(this.rendered && this.emptyText && this.getRawValue().length < 1){ 
                this.setRawValue(this.emptyText); 
                this.el.addClass(this.emptyClass); 
            } 
            return this; 
        }, 
        /** 
         * @private 
         *  
         * Use clearValue instead 
         */ 
        removeAllItems: function(){ 
            this.items.each(function(item){ 
                item.preDestroy(true); 
            },this); 
            this.manageClearBtn(); 
            return this; 
        }, 
        killItems : function(){ 
            this.items.each(function(item){ 
                item.kill(); 
            },this); 
            this.resetStore(); 
            this.items.clear(); 
            this.manageClearBtn(); 
            return this; 
        }, 
        resetStore: function(){ 
            this.store.clearFilter(); 
            if(!this.removeValuesFromStore){ 
                return this; 
            } 
            this.usedRecords.each(function(rec){ 
                this.store.add(rec); 
            },this); 
            this.usedRecords.clear(); 
            this.sortStore(); 
            return this; 
        }, 
        sortStore: function(){ 
            var ss = this.store.getSortState(); 
            if(ss && ss.field){ 
                this.store.sort(ss.field, ss.direction); 
            } 
            return this; 
        }, 
        getCaption: function(dataObject){ 
            if(typeof this.displayFieldTpl === 'string') { 
                this.displayFieldTpl = new Ext.XTemplate(this.displayFieldTpl); 
            } 
            var caption, recordData = dataObject instanceof Ext.data.Record ? dataObject.data : dataObject; 
           
            if(this.displayFieldTpl) { 
                caption = this.displayFieldTpl.apply(recordData); 
            } else if(this.displayField) { 
                caption = recordData[this.displayField]; 
            } 
             
            return caption; 
        }, 
        addRecord : function(record) { 
            var display = record.data[this.displayField], 
                caption = this.getCaption(record), 
                val = record.data[this.valueField], 
                cls = this.classField ? record.data[this.classField] : '', 
                style = this.styleField ? record.data[this.styleField] : ''; 
     
            if (this.removeValuesFromStore) { 
                this.usedRecords.add(val, record); 
                this.store.remove(record); 
            } 
             
            this.addItemBox(val, display, caption, cls, style); 
            this.fireEvent('additem', this, val, record); 
        }, 
        createRecord : function(recordData){ 
            if(!this.recordConstructor){ 
                var recordFields = [ 
                    {name: this.valueField}, 
                    {name: this.displayField} 
                ]; 
                if(this.classField){ 
                    recordFields.push({name: this.classField}); 
                } 
                if(this.styleField){ 
                    recordFields.push({name: this.styleField}); 
                } 
                this.recordConstructor = Ext.data.Record.create(recordFields); 
            } 
            return new this.recordConstructor(recordData); 
        }, 
        /** 
         * Adds an array of items to the SuperBoxSelect component if the {@link #Ext.ux.form.SuperBoxSelect-allowAddNewData} config is set to true. 
         * @methodOf Ext.ux.form.SuperBoxSelect 
         * @name addItem 
         * @param {Array} newItemObjects An Array of object literals containing the property names and values for an item. The property names must match those specified in {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField}  
         */ 
        addItems : function(newItemObjects){ 
            if (Ext.isArray(newItemObjects)) { 
                Ext.each(newItemObjects, function(item) { 
                    this.addItem(item); 
                }, this); 
            } else { 
                this.addItem(newItemObjects); 
            } 
        }, 
        /** 
         * Adds a new non-existing item to the SuperBoxSelect component if the {@link #Ext.ux.form.SuperBoxSelect-allowAddNewData} config is set to true. 
         * This method should be used in place of addItem from within the newitem event handler. 
         * @methodOf Ext.ux.form.SuperBoxSelect 
         * @name addNewItem 
         * @param {Object} newItemObject An object literal containing the property names and values for an item. The property names must match those specified in {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField}  
         */ 
        addNewItem : function(newItemObject){ 
            this.addItem(newItemObject,true); 
        }, 
        /** 
         * Adds an item to the SuperBoxSelect component if the {@link #Ext.ux.form.SuperBoxSelect-allowAddNewData} config is set to true. 
         * @methodOf Ext.ux.form.SuperBoxSelect 
         * @name addItem 
         * @param {Object} newItemObject An object literal containing the property names and values for an item. The property names must match those specified in {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField}  
         */ 
        addItem : function(newItemObject, /*hidden param*/ forcedAdd){ 
             
            var val = newItemObject[this.valueField]; 
     
            if(this.disabled) { 
                return false; 
            } 
            if(this.preventDuplicates && this.hasValue(val)){ 
                return; 
            } 
             
            //use existing record if found 
            var record = this.findRecord(this.valueField, val); 
            if (record) { 
                this.addRecord(record); 
                return; 
            } else if (!this.allowAddNewData) { // else it's a new item 
                return; 
            } 
             
            if(this.mode === 'remote'){ 
                this.remoteLookup.push(newItemObject);  
                this.doQuery(val,false,false,forcedAdd); 
                return; 
            } 
             
            var rec = this.createRecord(newItemObject); 
            this.store.add(rec); 
            this.addRecord(rec); 
             
            return true; 
        }, 
        addItemBox : function(itemVal,itemDisplay,itemCaption, itemClass, itemStyle) { 
            var hConfig, 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; 
            }, itemKey = Ext.id(null,'sbx-item'), 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(); 
             
            hConfig = { 
                tag :'input',  
                type :'hidden',  
                value : itemVal, 
                name : (this.hiddenName || this.name) 
            }; 
             
            if(this.disabled){ 
                Ext.apply(hConfig,{ 
                   disabled : 'disabled' 
                }) 
            } 
            box.hidden = this.el.insertSibling(hConfig,'before'); 
     
            this.items.add(itemKey,box); 
            this.applyEmptyText().autoSize().manageClearBtn().validateValue(); 
        }, 
        manageClearBtn : function() { 
            if (!this.renderFieldBtns || !this.rendered) { 
                return this; 
            } 
            var cls = 'x-superboxselect-btn-hide'; 
            if (this.items.getCount() === 0) { 
                this.buttonClear.addClass(cls); 
            } else { 
                this.buttonClear.removeClass(cls); 
            } 
            return this; 
        }, 
        findInStore : function(val){ 
            var index = this.store.find(this.valueField, val); 
            if(index > -1){ 
                return this.store.getAt(index); 
            } 
            return false; 
        }, 
        /** 
         * Returns a String value containing a concatenated list of item values. The list is concatenated with the {@link #Ext.ux.form.SuperBoxSelect-valueDelimiter}. 
         * @methodOf Ext.ux.form.SuperBoxSelect 
         * @name getValue 
         * @return {String} a String value containing a concatenated list of item values.  
         */ 
        getValue : function() { 
            var ret = []; 
            this.items.each(function(item){ 
                ret.push(item.value); 
            }); 
            return ret.join(this.valueDelimiter); 
        }, 
        /** 
         * Returns an Array of item objects containing the {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField}, {@link #Ext.ux.form.SuperBoxSelect-classField} and {@link #Ext.ux.form.SuperBoxSelect-styleField} properties. 
         * @methodOf Ext.ux.form.SuperBoxSelect 
         * @name getValueEx 
         * @return {Array} an array of item objects.  
         */ 
        getValueEx : function() { 
            var ret = []; 
            this.items.each(function(item){ 
                var newItem = {}; 
                newItem[this.valueField] = item.value; 
                newItem[this.displayField] = item.display; 
                if(this.classField){ 
                    newItem[this.classField] = item.cls || ''; 
                } 
                if(this.styleField){ 
                    newItem[this.styleField] = item.style || ''; 
                } 
                ret.push(newItem); 
            },this); 
            return ret; 
        }, 
        // private 
        initValue : function(){ 
      
            Ext.ux.form.SuperBoxSelect.superclass.initValue.call(this); 
            if(this.mode === 'remote') { 
                this.setOriginal = true; 
            } 
        }, 
        /** 
         * Sets the value of the SuperBoxSelect component. 
         * @methodOf Ext.ux.form.SuperBoxSelect 
         * @name setValue 
         * @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)  
         */ 
        setValue : function(value){ 
            if(!this.rendered){ 
                this.value = value; 
                return; 
            } 
                 
            this.removeAllItems().resetStore(); 
            this.remoteLookup = []; 
             
            if(Ext.isEmpty(value)){ 
                return; 
            } 
             
            var values = value; 
            if(!Ext.isArray(value)){ 
                value = '' + value; 
                values = value.split(this.valueDelimiter);  
            } 
             
            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 
            } 
             
        }, 
        /** 
         * Sets the value of the SuperBoxSelect component, adding new items that don't exist in the data store if the {@link #Ext.ux.form.SuperBoxSelect-allowAddNewData} config is set to true. 
         * @methodOf Ext.ux.form.SuperBoxSelect 
         * @name setValue 
         * @param {Array} data An Array of item objects containing the {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField} properties.   
         */ 
        setValueEx : function(data){ 
            this.removeAllItems().resetStore(); 
             
            if(!Ext.isArray(data)){ 
                data = [data]; 
            } 
            this.remoteLookup = []; 
             
            if(this.allowAddNewData && this.mode === 'remote'){ // no need to query 
                Ext.each(data, function(d){ 
                    var r = this.findRecord(this.valueField, d[this.valueField]) || this.createRecord(d); 
                    this.addRecord(r); 
                },this); 
                return; 
            } 
             
            Ext.each(data,function(item){ 
                this.addItem(item); 
            },this); 
        }, 
        /** 
         * Returns true if the SuperBoxSelect component has a selected item with a value matching the 'val' parameter. 
         * @methodOf Ext.ux.form.SuperBoxSelect 
         * @name hasValue 
         * @param {Mixed} val The value to test. 
         * @return {Boolean} true if the component has the selected value, false otherwise. 
         */ 
        hasValue: function(val){ 
            var has = false; 
            this.items.each(function(item){ 
                if(item.value == val){ 
                    has = true; 
                    return false; 
                } 
            },this); 
            return has; 
        }, 
        onSelect : function(record, index) { 
            if (this.fireEvent('beforeselect', this, record, index) !== false){ 
                var val = record.data[this.valueField]; 
                 
                if(this.preventDuplicates && this.hasValue(val)){ 
                    return; 
                } 
                 
                this.setRawValue(''); 
                this.lastSelectionText = ''; 
                 
                if(this.fireEvent('beforeadditem',this,val) !== false){ 
                    this.addRecord(record); 
                } 
                if(this.store.getCount() === 0 || !this.multiSelectMode){ 
                    this.collapse(); 
                }else{ 
                    this.restrictHeight(); 
                } 
            } 
        }, 
        onDestroy : function() { 
            this.items.purgeListeners(); 
            this.killItems(); 
            if (this.renderFieldBtns) { 
                Ext.destroy( 
                    this.buttonClear, 
                    this.buttonExpand, 
                    this.buttonWrap 
                ); 
            } 
     
            Ext.destroy( 
                this.inputEl, 
                this.wrapEl, 
                this.outerWrapEl 
            ); 
     
            Ext.ux.form.SuperBoxSelect.superclass.onDestroy.call(this); 
        }, 
        autoSize : function(){ 
            if(!this.rendered){ 
                return this; 
            } 
            if(!this.metrics){ 
                this.metrics = Ext.util.TextMetrics.createInstance(this.el); 
            } 
            var el = this.el, 
                v = el.dom.value, 
                d = document.createElement('div'); 
     
            if(v === "" && this.emptyText && this.items.getCount() < 1){ 
                v = this.emptyText; 
            } 
            d.appendChild(document.createTextNode(v)); 
            v = d.innerHTML; 
            d = null; 
            v += "&#160;"; 
            var w = Math.max(this.metrics.getWidth(v) +  24, 24); 
            if(typeof this._width != 'undefined'){ 
                w = Math.min(this._width, w); 
            } 
            this.el.setWidth(w); 
             
            if(Ext.isIE){ 
                this.el.dom.style.top='0'; 
            } 
            return this; 
        }, 
        doQuery : function(q, forceAll,valuesQuery, forcedAdd){ 
            q = Ext.isEmpty(q) ? '' : q; 
            var qe = { 
                query: q, 
                forceAll: forceAll, 
                combo: this, 
                cancel:false 
            }; 
            if(this.fireEvent('beforequery', qe)===false || qe.cancel){ 
                return false; 
            } 
            q = qe.query; 
            forceAll = qe.forceAll; 
            if(forceAll === true || (q.length >= this.minChars) || valuesQuery && !Ext.isEmpty(q)){ 
                if(this.lastQuery !== q || forcedAdd){ 
                    this.lastQuery = q; 
                    if(this.mode == 'local'){ 
                        this.selectedIndex = -1; 
                        if(forceAll){ 
                            this.store.clearFilter(); 
                        }else{ 
                            this.store.filter(this.displayField, q); 
                        } 
                        this.onLoad(); 
                    }else{ 
                         
                        this.store.baseParams[this.queryParam] = q; 
                        this.store.baseParams[this.queryValuesIndicator] = valuesQuery; 
                        this.store.load({ 
                            params: this.getParams(q) 
                        }); 
                        if(!forcedAdd){ 
                            this.expand(); 
                        } 
                    } 
                }else{ 
                    this.selectedIndex = -1; 
                    this.onLoad(); 
                } 
            } 
        } 
    }); 
    Ext.reg('superboxselect', Ext.ux.form.SuperBoxSelect); 
    /* 
     * @private 
     */ 
    Ext.ux.form.SuperBoxSelectItem = function(config){ 
        Ext.apply(this,config); 
        Ext.ux.form.SuperBoxSelectItem.superclass.constructor.call(this);  
    }; 
    /* 
     * @private 
     */ 
    Ext.ux.form.SuperBoxSelectItem = Ext.extend(Ext.ux.form.SuperBoxSelectItem,Ext.Component, { 
        initComponent : function(){ 
            Ext.ux.form.SuperBoxSelectItem.superclass.initComponent.call(this);  
        }, 
        onElClick : function(e){ 
            var o = this.owner; 
            o.clearCurrentFocus().collapse(); 
            if(o.navigateItemsWithTab){ 
                this.focus(); 
            }else{ 
                o.el.dom.focus(); 
                var that = this; 
                (function(){ 
                    this.onLnkFocus(); 
                    o.currentFocus = this; 
                }).defer(10,this); 
            } 
        }, 
         
        onLnkClick : function(e){ 
            if(e) { 
                e.stopEvent(); 
            } 
            this.preDestroy(); 
            if(!this.owner.navigateItemsWithTab){ 
                this.owner.el.focus(); 
            } 
        }, 
        onLnkFocus : function(){ 
            this.el.addClass("x-superboxselect-item-focus"); 
            this.owner.outerWrapEl.addClass("x-form-focus"); 
        }, 
         
        onLnkBlur : function(){ 
            this.el.removeClass("x-superboxselect-item-focus"); 
            this.owner.outerWrapEl.removeClass("x-form-focus"); 
        },
         
        enableElListeners : function() { 
            this.el.on('click', this.onElClick, this, {stopEvent:true});        
            this.el.addClassOnOver('x-superboxselect-item-hover'); 
        },  
        enableLnkListeners : function() { 
            this.lnk.on({ 
                click: this.onLnkClick, 
                focus: this.onLnkFocus, 
                blur:  this.onLnkBlur, 
                scope: this 
            }); 
        }, 
         
        enableAllListeners : function() { 
            this.enableElListeners(); 
            this.enableLnkListeners(); 
        }, 
        disableAllListeners : function() { 
            this.el.removeAllListeners(); 
            this.lnk.un('click', this.onLnkClick, this); 
            this.lnk.un('focus', this.onLnkFocus, this); 
            this.lnk.un('blur', this.onLnkBlur, this); 
        }, 
        onRender : function(ct, position){ 
             
            Ext.ux.form.SuperBoxSelectItem.superclass.onRender.call(this, ct, position); 
             
            var el = this.el; 
            if(el){ 
                el.remove(); 
            } 
             
            this.el = el = ct.createChild({ tag: 'li' }, ct.last()); 
            el.addClass('x-superboxselect-item'); 
             
            var btnEl = this.owner.navigateItemsWithTab ? ( Ext.isSafari ? 'button' : 'a') : 'span'; 
            var itemKey = this.key; 
             
            Ext.apply(el, { 
                focus: function(){ 
                    var c = this.down(btnEl +'.x-superboxselect-item-close'); 
                    if(c){ 
                        c.focus(); 
                    } 
                }, 
                preDestroy: function(){ 
                    this.preDestroy(); 
                }.createDelegate(this) 
            }); 
             
            this.enableElListeners(); 
     
            el.update(this.caption); 
     
            var cfg = { 
                tag: btnEl, 
                'class': 'x-superboxselect-item-close', 
                tabIndex : this.owner.navigateItemsWithTab ? '0' : '-1' 
            }; 
            if(btnEl === 'a'){ 
                cfg.href = '#'; 
            } 
            this.lnk = el.createChild(cfg); 
             
             
            if(!this.disabled) { 
                this.enableLnkListeners(); 
            }else { 
                this.disableAllListeners(); 
            } 
             
            this.on({ 
                disable: this.disableAllListeners, 
                enable: this.enableAllListeners, 
                scope: this 
            }); 
     
            this.setupKeyMap(); 
        }, 
        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; 
        }, 
        moveFocus : function(dir) { 
            var el = this.el[dir == 'left' ? 'prev' : 'next']() || this.owner.el; 
         
            el.focus.defer(100,el); 
        }, 
     
        preDestroy : function(supressEffect) { 
            if(this.fireEvent('remove', this) === false){ 
                return; 
            }     
            var actionDestroy = function(){ 
                if(this.owner.navigateItemsWithTab){ 
                    this.moveFocus('right'); 
                } 
                this.hidden.remove(); 
                this.hidden = null; 
                this.destroy(); 
            }; 
             
            if(supressEffect){ 
                actionDestroy.call(this); 
            } else { 
                this.el.hide({ 
                    duration: 0.2, 
                    callback: actionDestroy, 
                    scope: this 
                }); 
            } 
            return this; 
        }, 
        kill : function(){ 
            this.hidden.remove(); 
            this.hidden = null; 
            this.purgeListeners(); 
            this.destroy(); 
        }, 
        onDisable : function() { 
            if(this.hidden){ 
                this.hidden.dom.setAttribute('disabled', 'disabled'); 
            } 
            this.keyMap.disable(); 
            Ext.ux.form.SuperBoxSelectItem.superclass.onDisable.call(this); 
        }, 
        onEnable : function() { 
            if(this.hidden){ 
                this.hidden.dom.removeAttribute('disabled'); 
            } 
            this.keyMap.enable(); 
            Ext.ux.form.SuperBoxSelectItem.superclass.onEnable.call(this); 
        }, 
        onDestroy : function() { 
            Ext.destroy( 
                this.lnk, 
                this.el 
            ); 
             
            Ext.ux.form.SuperBoxSelectItem.superclass.onDestroy.call(this); 
        } 
    });
    Last edited by dorgan; 16 Jul 2010 at 8:57 AM. Reason: Found real reason for bug....cannot add to classes for a hover

  7. #217
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    Good finding dorgan! I applied it with success!

    I also decided to extend the SuperBoxSelect. I've added a property called maxHeight that defines the maxHeigh (or height for all that matters) that the component should have. So now one has the option of imposing a height to the component or just let it grow indefinitely. I've also changed the css.

    So if one specifies maxHeight: 50, then the component will have the height of 50 and create scrollbars whenever needed, if not then it behaves as the original version.

    Code:
    Ext.namespace('Ext.ux.form');
    /**
     * <p>SuperBoxSelect is an extension of the ComboBox component that displays selected items as labelled boxes within the form field. As seen on facebook, hotmail and other sites.</p>
     * <p>The SuperBoxSelect component was inspired by the BoxSelect component found here: http://efattal.fr/en/extjs/extuxboxselect/</p>
     * 
     * @author <a href="mailto:dan.humphrey@technomedia.co.uk">Dan Humphrey</a>
     * @class Ext.ux.form.SuperBoxSelect
     * @extends Ext.form.ComboBox
     * @constructor
     * @component
     * @version 1.0b
     * @license TBA
     * 
     */
    Ext.ux.form.SuperBoxSelect = function(config) {
        Ext.ux.form.SuperBoxSelect.superclass.constructor.call(this,config);
        this.addEvents(
            /**
             * Fires before an item is added to the component via user interaction. Return false from the callback function to prevent the item from being added.
             * @event beforeadditem
             * @memberOf Ext.ux.form.SuperBoxSelect
             * @param {SuperBoxSelect} this
             * @param {Mixed} value The value of the item to be added
             */
            'beforeadditem',
    
            /**
             * Fires after a new item is added to the component.
             * @event additem
             * @memberOf Ext.ux.form.SuperBoxSelect
             * @param {SuperBoxSelect} this
             * @param {Mixed} value The value of the item which was added
             * @param {Record} record The store record which was added
             */
            'additem',
    
            /**
             * Fires when the allowAddNewData config is set to true, and a user attempts to add an item that is not in the data store.
             * @event newitem
             * @memberOf Ext.ux.form.SuperBoxSelect
             * @param {SuperBoxSelect} this
             * @param {Mixed} value The new item's value
             */
            'newitem',
    
            /**
             * Fires when an item's remove button is clicked. Return false from the callback function to prevent the item from being removed.
             * @event beforeremoveitem
             * @memberOf Ext.ux.form.SuperBoxSelect
             * @param {SuperBoxSelect} this
             * @param {Mixed} value The value of the item to be removed
             */
            'beforeremoveitem',
    
            /**
             * Fires after an item has been removed.
             * @event removeitem
             * @memberOf Ext.ux.form.SuperBoxSelect
             * @param {SuperBoxSelect} this
             * @param {Mixed} value The value of the item which was removed
             * @param {Record} record The store record which was removed
             */
            'removeitem',
            /**
             * Fires after the component values have been cleared.
             * @event clear
             * @memberOf Ext.ux.form.SuperBoxSelect
             * @param {SuperBoxSelect} this
             */
            'clear'
        );
        
    };
    /**
     * @private hide from doc gen
     */
    Ext.ux.form.SuperBoxSelect = Ext.extend(Ext.ux.form.SuperBoxSelect,Ext.form.ComboBox,{
        maxHeight: null,
        /**
         * @cfg {Boolean} allowAddNewData When set to true, allows items to be added (via the setValueEx and addItem methods) that do not already exist in the data store. Defaults to false.
         */
        allowAddNewData: false,
    
        /**
         * @cfg {Boolean} backspaceDeletesLastItem When set to false, the BACKSPACE key will focus the last selected item. When set to true, the last item will be immediately deleted. Defaults to true.
         */
        backspaceDeletesLastItem: true,
    
        /**
         * @cfg {String} classField The underlying data field that will be used to supply an additional class to each item.
         */
        classField: null,
    
        /**
         * @cfg {String} clearBtnCls An additional class to add to the in-field clear button.
         */
        clearBtnCls: '',
    
        /**
         * @cfg {String/XTemplate} displayFieldTpl A template for rendering the displayField in each selected item. Defaults to null.
         */
        displayFieldTpl: null,
    
        /**
         * @cfg {String} extraItemCls An additional css class to apply to each item.
         */
        extraItemCls: '',
    
        /**
         * @cfg {String/Object/Function} extraItemStyle Additional css style(s) to apply to each item. Should be a valid argument to Ext.Element.applyStyles.
         */
        extraItemStyle: '',
    
        /**
         * @cfg {String} expandBtnCls An additional class to add to the in-field expand button.
         */
        expandBtnCls: '',
    
        /**
         * @cfg {Boolean} fixFocusOnTabSelect When set to true, the component will not lose focus when a list item is selected with the TAB key. Defaults to true.
         */
        fixFocusOnTabSelect: true,
    
        /**
         * @cfg {Boolean} navigateItemsWithTab When set to true the tab key will navigate between selected items. Defaults to true.
         */
        navigateItemsWithTab: true,
    
        /**
         * @cfg {Boolean} pinList When set to true the select list will be pinned to allow for multiple selections. Defaults to true.
         */
        pinList: true,
    
        /**
         * @cfg {Boolean} preventDuplicates When set to true unique item values will be enforced. Defaults to true.
         */
        preventDuplicates: true,
        
        /**
         * @cfg {String} queryValuesDelimiter Used to delimit multiple values queried from the server when mode is remote.
         */
        queryValuesDelimiter: '|',
        
        /**
         * @cfg {String} queryValuesIndicator A request variable that is sent to the server (as true) to indicate that we are querying values rather than display data (as used in autocomplete) when mode is remote.
         */
        queryValuesInidicator: 'valuesqry',
    
        /**
         * @cfg {Boolean} removeValuesFromStore When set to true, selected records will be removed from the store. Defaults to true.
         */
        removeValuesFromStore: true,
    
        /**
         * @cfg {String} renderFieldBtns When set to true, will render in-field buttons for clearing the component, and displaying the list for selection. Defaults to true.
         */
        renderFieldBtns: true,
    
        /**
         * @cfg {Boolean} stackItems When set to true, the items will be stacked 1 per line. Defaults to false which displays the items inline.
         */
        stackItems: false,
    
        /**
         * @cfg {String} styleField The underlying data field that will be used to supply additional css styles to each item.
         */
        styleField : null,
        
         /**
         * @cfg {Boolean} supressClearValueRemoveEvents When true, the removeitem event will not be fired for each item when the clearValue method is called, or when the clear button is used. Defaults to false.
         */
        supressClearValueRemoveEvents : false,
        
        /**
         * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable automatic validation (defaults to 'blur').
         */
        validationEvent : 'blur',
        
        /**
         * @cfg {String} valueDelimiter The delimiter to use when joining and splitting value arrays and strings.
         */
        valueDelimiter: ',',
        initComponent:function() {
           Ext.apply(this, {
                items           : new Ext.util.MixedCollection(false),
                usedRecords     : new Ext.util.MixedCollection(false),
                addedRecords    : [],
                remoteLookup    : [],
                hideTrigger     : true,
                grow            : false,
                resizable       : false,
                multiSelectMode : false,
                preRenderValue  : null
            });
            
            if(this.transform){
                this.doTransform();
            }
            
            Ext.ux.form.SuperBoxSelect.superclass.initComponent.call(this);
            if(this.mode === 'remote' && this.store){
                this.store.on('load', this.onStoreLoad, this);
            }
        },
        onRender:function(ct, position) {
            Ext.ux.form.SuperBoxSelect.superclass.onRender.call(this, ct, position);
            
            this.el.dom.removeAttribute('name');
            
            var extraClass = (this.stackItems === true) ? 'x-superboxselect-stacked' : '';
            if(this.renderFieldBtns){
                extraClass += ' x-superboxselect-display-btns';
            }
            this.el.removeClass('x-form-text').addClass('x-superboxselect-input-field');
            
            this.wrapEl = this.el.wrap({
                tag : 'ul'
            });
            
               this.outerWrapEl = this.wrapEl.wrap({
                tag : 'div',
                   cls: 'x-form-text x-superboxselect ' + extraClass,
                   style: Ext.isEmpty(this.maxHeight) ? 'height: auto;' : 'height: '+this.maxHeight+'px;' 
              });
           
            this.inputEl = this.el.wrap({
                tag : 'li',
                cls : 'x-superboxselect-input'
            });
            
            if(this.renderFieldBtns){
                this.setupFieldButtons().manageClearBtn();
            }
            
            this.setupFormInterception();
            
            if(this.preRenderValue){
                this.setValue(this.preRenderValue);
                this.preRenderValue = null;
            }
        },
        onStoreLoad : function(store, records, options){
            //accomodating for bug in Ext 3.0.0 where options.params are empty
            var q = options.params[this.queryParam] || store.baseParams[this.queryParam] || "",
                isValuesQuery = options.params[this.queryValuesInidicator] || store.baseParams[this.queryValuesInidicator];
            
            if(this.removeValuesFromStore){
                this.store.each(function(record) {
                    if(this.usedRecords.containsKey(record.get(this.valueField))){
                        this.store.remove(record);
                    }
                }, this);
            }
            //queried values
            if(isValuesQuery){
                var params = q.split(this.queryValuesDelimiter);
                Ext.each(params,function(p){
                    this.remoteLookup.remove(p);
                    var rec = this.findRecord(this.valueField,p);
                    if(rec){
                        this.addRecord(rec);
                    }
                },this);
                
                if(this.setOriginal){
                    this.setOriginal = false;
                    this.originalValue = this.getValue();
                }
            }
    
            //queried display (autocomplete) & addItem
            if(q !== '' && this.allowAddNewData){
                Ext.each(this.remoteLookup,function(r){
                    if(typeof r == "object" && r[this.displayField] == q){
                        this.remoteLookup.remove(r);
                        if(records.length && records[0].get(this.displayField) === q) {
                            this.addRecord(records[0]);
                            return;
                        }
                        var rec = this.createRecord(r);
                        this.store.add(rec);
                        this.addRecord(rec);
                        this.addedRecords.push(rec); //keep track of records added to store
                        (function(){
                            if(this.isExpanded()){
                                this.collapse();
                            }
                        }).defer(10,this);
                        return;
                    }
                },this);
            }
            
            var toAdd = [];
            if(q === ''){
                Ext.each(this.addedRecords,function(rec){
                    if(this.preventDuplicates && this.usedRecords.containsKey(rec.get(this.valueField))){
                        return;                    
                    }
                    toAdd.push(rec);
                    
                },this);
                
            }else{
                var re = new RegExp(Ext.escapeRe(q) + '.*','i');
                Ext.each(this.addedRecords,function(rec){
                    if(this.preventDuplicates && this.usedRecords.containsKey(rec.get(this.valueField))){
                        return;                    
                    }
                    if(re.test(rec.get(this.displayField))){
                        toAdd.push(rec);
                    }
                },this);
            }
            this.store.add(toAdd);
            this.store.sort(this.displayField, 'ASC');
            
            if(this.store.getCount() === 0 && this.isExpanded()){
                this.collapse();
            }
            
        },
        doTransform : function() {
            var s = Ext.getDom(this.transform), transformValues = [];
                if(!this.store){
                    this.mode = 'local';
                    var d = [], opts = s.options;
                    for(var i = 0, len = opts.length;i < len; i++){
                        var o = opts[i],
                            value = (Ext.isIE && !Ext.isIE8 ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text,
                            cls = (Ext.isIE && !Ext.isIE8 ? o.getAttributeNode('class').specified : o.hasAttribute('class')) ? o.className : '',
                            style = (Ext.isIE && !Ext.isIE8 ? o.getAttributeNode('style').specified : o.hasAttribute('style')) ? o.style : '';
                        if(o.selected) {
                            transformValues.push(value);
                        }
                        d.push([value, o.text, cls, style.cssText]);
                    }
                    this.store = new Ext.data.SimpleStore({
                        'id': 0,
                        fields: ['value', 'text', 'cls', 'style'],
                        data : d
                    });
                    Ext.apply(this,{
                        valueField: 'value',
                        displayField: 'text',
                        classField: 'cls',
                        styleField: 'style'
                    });
                }
               
                if(transformValues.length){
                    this.value = transformValues.join(',');
                }
        },
        setupFieldButtons : function(){
            this.buttonWrap = this.outerWrapEl.createChild({
                cls: 'x-superboxselect-btns'
            });
            
            this.buttonClear = this.buttonWrap.createChild({
                tag:'div',
                cls: 'x-superboxselect-btn-clear ' + this.clearBtnCls
            });
            
            this.buttonExpand = this.buttonWrap.createChild({
                tag:'div',
                cls: 'x-superboxselect-btn-expand ' + this.expandBtnCls
            });
            
            this.initButtonEvents();
            
            return this;
        },
        initButtonEvents : function() {
            this.buttonClear.addClassOnOver('x-superboxselect-btn-over').on('click', function(e) {
                e.stopEvent();
                if (this.disabled) {
                    return;
                }
                this.clearValue();
                this.el.focus();
            }, this);
    
            this.buttonExpand.addClassOnOver('x-superboxselect-btn-over').on('click', function(e) {
                e.stopEvent();
                if (this.disabled) {
                    return;
                }
                if (this.isExpanded()) {
                    this.multiSelectMode = false;
                } else if (this.pinList) {
                    this.multiSelectMode = true;
                }
                this.onTriggerClick();
            }, this);
        },
        removeButtonEvents : function() {
            this.buttonClear.removeAllListeners();
            this.buttonExpand.removeAllListeners();
            return this;
        },
        clearCurrentFocus : function(){
            if(this.currentFocus){
                this.currentFocus.onLnkBlur();
                this.currentFocus = null;
            }  
            return this;        
        },
        initEvents : function() {
            var el = this.el;
    
            el.on({
                click   : this.onClick,
                focus   : this.clearCurrentFocus,
                blur    : this.onBlur,
    
                keydown : this.onKeyDownHandler,
                keyup   : this.onKeyUpBuffered,
    
                scope   : this
            });
    
            this.on({
                collapse: this.onCollapse,
                expand: this.clearCurrentFocus,
                scope: this
            });
    
            this.wrapEl.on('click', this.onWrapClick, this);
            this.outerWrapEl.on('click', this.onWrapClick, this);
            
            this.inputEl.focus = function() {
                el.focus();
            };
    
            Ext.ux.form.SuperBoxSelect.superclass.initEvents.call(this);
    
            Ext.apply(this.keyNav, {
                tab: function(e) {
                    if (this.fixFocusOnTabSelect && this.isExpanded()) {
                        e.stopEvent();
                        el.blur();
                        this.onViewClick(false);
                        this.focus(false, 10);
                        return true;
                    }
    
                    this.onViewClick(false);
                    if (el.dom.value !== '') {
                        this.setRawValue('');
                    }
    
                    return true;
                },
    
                down: function(e) {
                    if (!this.isExpanded() && !this.currentFocus) {
                        this.onTriggerClick();
                    } else {
                        this.inKeyMode = true;
                        this.selectNext();
                    }
                },
    
                enter: function(){}
            });
        },
    
        onClick: function() {
            this.clearCurrentFocus();
            this.collapse();
            this.autoSize();
        },
    
        beforeBlur: Ext.form.ComboBox.superclass.beforeBlur,
    
        onFocus: function() {
            this.outerWrapEl.addClass(this.focusClass);
    
            Ext.ux.form.SuperBoxSelect.superclass.onFocus.call(this);
        },
    
        onBlur: function() {
            this.outerWrapEl.removeClass(this.focusClass);
    
            this.clearCurrentFocus();
    
            if (this.el.dom.value !== '') {
                this.applyEmptyText();
                this.autoSize();
            }
    
            Ext.ux.form.SuperBoxSelect.superclass.onBlur.call(this);
        },
    
        onCollapse: function() {
            this.view.clearSelections();
            this.multiSelectMode = false;
        },
    
        onWrapClick: function(e) {
            e.stopEvent();
            this.collapse();
            this.el.focus();
            this.clearCurrentFocus();
        },
        markInvalid : function(msg) {
            var elp, t;
            return;
            if (!this.rendered || this.preventMark ) {
                return;
            }
            this.outerWrapEl.addClass(this.invalidClass);
            msg = msg || this.invalidText;
    
            switch (this.msgTarget) {
                case 'qtip':
                    Ext.apply(this.el.dom, {
                        qtip    : msg,
                        qclass  : 'x-form-invalid-tip'
                    });
                    Ext.apply(this.wrapEl.dom, {
                        qtip    : msg,
                        qclass  : 'x-form-invalid-tip'
                    });
                    if (Ext.QuickTips) { // fix for floating editors interacting with DND
                        Ext.QuickTips.enable();
                    }
                    break;
                case 'title':
                    this.el.dom.title = msg;
                    this.wrapEl.dom.title = msg;
                    this.outerWrapEl.dom.title = msg;
                    break;
                case 'under':
                    if (!this.errorEl) {
                        elp = this.getErrorCt();
                        if (!elp) { // field has no container el
                            this.el.dom.title = msg;
                            break;
                        }
                        this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
                        this.errorEl.setWidth(elp.getWidth(true) - 20);
                    }
                    this.errorEl.update(msg);
                    Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
                    break;
                case 'side':
                    if (!this.errorIcon) {
                        elp = this.getErrorCt();
                        if (!elp) { // field has no container el
                            this.el.dom.title = msg;
                            break;
                        }
                        this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
                    }
                    this.alignErrorIcon();
                    Ext.apply(this.errorIcon.dom, {
                        qtip    : msg,
                        qclass  : 'x-form-invalid-tip'
                    });
                    this.errorIcon.show();
                    this.on('resize', this.alignErrorIcon, this);
                    break;
                default:
                    t = Ext.getDom(this.msgTarget);
                    t.innerHTML = msg;
                    t.style.display = this.msgDisplay;
                    break;
            }
            this.fireEvent('invalid', this, msg);
        },
        clearInvalid : function(){
            if(!this.rendered || this.preventMark){ // not rendered
                return;
            }
            this.outerWrapEl.removeClass(this.invalidClass);
            switch(this.msgTarget){
                case 'qtip':
                    this.el.dom.qtip = '';
                    this.wrapEl.dom.qtip ='';
                    break;
                case 'title':
                    this.el.dom.title = '';
                    this.wrapEl.dom.title = '';
                    this.outerWrapEl.dom.title = '';
                    break;
                case 'under':
                    if(this.errorEl){
                        Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
                    }
                    break;
                case 'side':
                    if(this.errorIcon){
                        this.errorIcon.dom.qtip = '';
                        this.errorIcon.hide();
                        this.un('resize', this.alignErrorIcon, this);
                    }
                    break;
                default:
                    var t = Ext.getDom(this.msgTarget);
                    t.innerHTML = '';
                    t.style.display = 'none';
                    break;
            }
            this.fireEvent('valid', this);
        },
        alignErrorIcon : function(){
            if(this.wrap){
                this.errorIcon.alignTo(this.wrap, 'tl-tr', [Ext.isIE ? 5 : 2, 3]);
            }
        },
        expand : function(){
            if (this.isExpanded() || !this.hasFocus) {
                return;
            }
            this.list.alignTo(this.outerWrapEl, this.listAlign).show();
            this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
            Ext.getDoc().on({
                mousewheel: this.collapseIf,
                mousedown: this.collapseIf,
                scope: this
            });
            this.fireEvent('expand', this);
        },
        restrictHeight : function(){
            var inner = this.innerList.dom,
                st = inner.scrollTop, 
                list = this.list;
            
            inner.style.height = '';
            
            var pad = list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight,
                h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight),
                ha = this.getPosition()[1]-Ext.getBody().getScroll().top,
                hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height,
                space = Math.max(ha, hb, this.minHeight || 0)-list.shadowOffset-pad-5;
            
            h = Math.min(h, space, this.maxHeight);
            this.innerList.setHeight(h);
    
            list.beginUpdate();
            list.setHeight(h+pad);
            list.alignTo(this.outerWrapEl, this.listAlign);
            list.endUpdate();
            
            if(this.multiSelectMode){
                inner.scrollTop = st;
            }
        },
        validateValue: function(val){
            if(this.items.getCount() === 0){
                 if(this.allowBlank){
                     this.clearInvalid();
                     return true;
                 }else{
                     this.markInvalid(this.blankText);
                     return false;
                 }
            }else{
                this.clearInvalid();
                return true;
            }
        },
        setupFormInterception : function(){
            var form;
            this.findParentBy(function(p){ 
                if(p.getForm){
                    form = p.getForm();
                }
            });
            if(form){
                var formGet = form.getValues;
                form.getValues = function(asString){
                    if(this.items.getCount() > 0){
                        this.el.dom.disabled = true;
                    }
                    var oldVal = this.el.dom.value;
                    this.setRawValue('');
                    var vals = formGet.call(form, asString);
                    this.el.dom.disabled = false;
                    this.setRawValue(oldVal);
                    return vals;
                }.createDelegate(this);
            }
        },
        onResize : function(w, h, rw, rh) {
            var reduce = Ext.isIE6 ? 4 : Ext.isIE7 ? 1 : Ext.isIE8 ? 1 : 0;
            
            this._width = w;
            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();
        },
        onEnable: function(){
            Ext.ux.form.SuperBoxSelect.superclass.onEnable.call(this);
            this.items.each(function(item){
                item.enable();
            });
            if (this.renderFieldBtns) {
                this.initButtonEvents();
            }
        },
        onDisable: function(){
            Ext.ux.form.SuperBoxSelect.superclass.onDisable.call(this);
            this.items.each(function(item){
                item.disable();
            });
            if(this.renderFieldBtns){
                this.removeButtonEvents();
            }
        },
        /**
         * Clears all values from the component.
         * @methodOf Ext.ux.form.SuperBoxSelect
         * @name clearValue
         * @param {Boolean} supressRemoveEvent [Optional] When true, the 'removeitem' event will not fire for each item that is removed.    
         */
        clearValue : function(supressRemoveEvent){
            Ext.ux.form.SuperBoxSelect.superclass.clearValue.call(this);
            this.preventMultipleRemoveEvents = supressRemoveEvent || this.supressClearValueRemoveEvents || false;
            this.removeAllItems();
            this.fireEvent('clear',this);
            return this;
        },
        onKeyUp : function(e) {
            if (this.editable !== false && !e.isSpecialKey() && (!e.hasModifier() || e.shiftKey)) {
                this.lastKey = e.getKey();
                this.dqTask.delay(this.queryDelay);
            }        
        },
        onKeyDownHandler : function(e,t) {
                    
            var toDestroy,nextFocus,idx;
            if ((e.getKey() === e.DELETE || e.getKey() === e.SPACE) && this.currentFocus){
                e.stopEvent();
                toDestroy = this.currentFocus;
                this.on('expand',function(){this.collapse();},this,{single: true});
                idx = this.items.indexOfKey(this.currentFocus.key);
                
                this.clearCurrentFocus();
                
                if(idx < (this.items.getCount() -1)){
                    nextFocus = this.items.itemAt(idx+1);
                }
                
                toDestroy.preDestroy(true);
                if(nextFocus){
                    (function(){
                        nextFocus.onLnkFocus();
                        this.currentFocus = nextFocus;
                    }).defer(200,this);
                }
            
                return true;
            }
            
            var val = this.el.dom.value, it, ctrl = e.ctrlKey;
            if(e.getKey() === e.ENTER){
                e.stopEvent();
                if (val !== "") {
                    if (ctrl || !this.isExpanded())  {  //ctrl+enter for new items
                        this.view.clearSelections();
                        this.collapse();
                        this.setRawValue('');
                        this.fireEvent('newitem', this, val);
                    }
                    else {
                        this.onViewClick();
                        //removed from 3.0.1
                        if(this.unsetDelayCheck){
                            this.delayedCheck = true;
                            this.unsetDelayCheck.defer(10, this);
                        }
                    }
                }else{
                    if(!this.isExpanded()){
                        return;
                    }
                    this.onViewClick();
                    //removed from 3.0.1
                    if(this.unsetDelayCheck){
                        this.delayedCheck = true;
                        this.unsetDelayCheck.defer(10, this);
                    }
                }
                return true;
            }
            
            if(val !== '') {
                this.autoSize();
                return;
            }
            
            //select first item
            if(e.getKey() === e.HOME){
                e.stopEvent();
                if(this.items.getCount() > 0){
                    this.collapse();
                    it = this.items.get(0);
                    it.el.focus();
                    
                }
                return true;
            }
            //backspace remove
            if(e.getKey() === e.BACKSPACE){
                e.stopEvent();
                if(this.currentFocus) {
                    toDestroy = this.currentFocus;
                    this.on('expand',function(){
                        this.collapse();
                    },this,{single: true});
                    
                    idx = this.items.indexOfKey(toDestroy.key);
                    
                    this.clearCurrentFocus();
                    if(idx < (this.items.getCount() -1)){
                        nextFocus = this.items.itemAt(idx+1);
                    }
                    
                    toDestroy.preDestroy(true);
                    
                    if(nextFocus){
                        (function(){
                            nextFocus.onLnkFocus();
                            this.currentFocus = nextFocus;
                        }).defer(200,this);
                    }
                    
                    return;
                }else{
                    it = this.items.get(this.items.getCount() -1);
                    if(it){
                        if(this.backspaceDeletesLastItem){
                            this.on('expand',function(){this.collapse();},this,{single: true});
                            it.preDestroy(true);
                        }else{
                            if(this.navigateItemsWithTab){
                                it.onElClick();
                            }else{
                                this.on('expand',function(){
                                    this.collapse();
                                    this.currentFocus = it;
                                    this.currentFocus.onLnkFocus.defer(20,this.currentFocus);
                                },this,{single: true});
                            }
                        }
                    }
                    return true;
                }
            }
            
            if(!e.isNavKeyPress()){
                this.multiSelectMode = false;
                this.clearCurrentFocus();
                return;
            }
            //arrow nav
            if(e.getKey() === e.LEFT || (e.getKey() === e.UP && !this.isExpanded())){
                e.stopEvent();
                this.collapse();
                //get last item
                it = this.items.get(this.items.getCount()-1);
                if(this.navigateItemsWithTab){ 
                    //focus last el
                    if(it){
                        it.focus(); 
                    }
                }else{
                    //focus prev item
                    if(this.currentFocus){
                        idx = this.items.indexOfKey(this.currentFocus.key);
                        this.clearCurrentFocus();
                        
                        if(idx !== 0){
                            this.currentFocus = this.items.itemAt(idx-1);
                            this.currentFocus.onLnkFocus();
                        }
                    }else{
                        this.currentFocus = it;
                        if(it){
                            it.onLnkFocus();
                        }
                    }
                }
                return true;
            }
            if(e.getKey() === e.DOWN){
                if(this.currentFocus){
                    this.collapse();
                    e.stopEvent();
                    idx = this.items.indexOfKey(this.currentFocus.key);
                    if(idx == (this.items.getCount() -1)){
                        this.clearCurrentFocus.defer(10,this);
                    }else{
                        this.clearCurrentFocus();
                        this.currentFocus = this.items.itemAt(idx+1);
                        if(this.currentFocus){
                            this.currentFocus.onLnkFocus();
                        }
                    }
                    return true;
                }
            }
            if(e.getKey() === e.RIGHT){
                this.collapse();
                it = this.items.itemAt(0);
                if(this.navigateItemsWithTab){ 
                    //focus first el
                    if(it){
                        it.focus(); 
                    }
                }else{
                    if(this.currentFocus){
                        idx = this.items.indexOfKey(this.currentFocus.key);
                        this.clearCurrentFocus();
                        if(idx < (this.items.getCount() -1)){
                            this.currentFocus = this.items.itemAt(idx+1);
                            if(this.currentFocus){
                                this.currentFocus.onLnkFocus();
                            }
                        }
                    }else{
                        this.currentFocus = it;
                        if(it){
                            it.onLnkFocus();
                        }
                    }
                }
            }
        },
        onKeyUpBuffered : function(e){
            if(!e.isNavKeyPress()){
                this.autoSize();
            }
        },
        reset :  function(){
            Ext.ux.form.SuperBoxSelect.superclass.reset.call(this);
            this.addedRecords = [];
            this.autoSize().setRawValue('');
            this.el.focus();
        },
        applyEmptyText : function(){
            if(this.items.getCount() > 0){
                this.el.removeClass(this.emptyClass);
                this.setRawValue('');
                return this;
            }
            if(this.rendered && this.emptyText && this.getRawValue().length < 1){
                this.setRawValue(this.emptyText);
                this.el.addClass(this.emptyClass);
            }
            return this;
        },
        /**
         * @private
         * 
         * Use clearValue instead
         */
        removeAllItems: function(){
            this.items.each(function(item){
                item.preDestroy(true);
            },this);
            this.manageClearBtn();
            return this;
        },
        resetStore: function(){
            this.store.clearFilter();
            if(!this.removeValuesFromStore){
                return this;
            }
            this.usedRecords.each(function(rec){
                this.store.add(rec);
            },this);
            this.sortStore();
            return this;
        },
        sortStore: function(){
            var ss = this.store.getSortState();
            if(ss && ss.field){
                this.store.sort(ss.field, ss.direction);
            }
            return this;
        },
        getCaption: function(dataObject){
            if(typeof this.displayFieldTpl === 'string') {
                this.displayFieldTpl = new Ext.XTemplate(this.displayFieldTpl);
            }
            var caption, recordData = dataObject instanceof Ext.data.Record ? dataObject.data : dataObject;
          
            if(this.displayFieldTpl) {
                caption = this.displayFieldTpl.apply(recordData);
            } else if(this.displayField) {
                caption = recordData[this.displayField];
            }
            
            return caption;
        },
        addRecord : function(record) {
            var display = record.data[this.displayField],
                caption = this.getCaption(record),
                val = record.data[this.valueField],
                cls = this.classField ? record.data[this.classField] : '',
                style = this.styleField ? record.data[this.styleField] : '';
    
            if (this.removeValuesFromStore) {
                this.usedRecords.add(val, record);
                this.store.remove(record);
            }
            
            this.addItemBox(val, display, caption, cls, style);
            this.fireEvent('additem', this, val, record);
        },
        createRecord : function(recordData){
            if(!this.recordConstructor){
                var recordFields = [
                    {name: this.valueField},
                    {name: this.displayField}
                ];
                if(this.classField){
                    recordFields.push({name: this.classField});
                }
                if(this.styleField){
                    recordFields.push({name: this.styleField});
                }
                this.recordConstructor = Ext.data.Record.create(recordFields);
            }
            return new this.recordConstructor(recordData);
        },
        /**
         * Adds an array of items to the SuperBoxSelect component if the {@link #Ext.ux.form.SuperBoxSelect-allowAddNewData} config is set to true.
         * @methodOf Ext.ux.form.SuperBoxSelect
         * @name addItem
         * @param {Array} newItemObjects An Array of object literals containing the property names and values for an item. The property names must match those specified in {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField} 
         */
        addItems : function(newItemObjects){
            if (Ext.isArray(newItemObjects)) {
                Ext.each(newItemObjects, function(item) {
                    this.addItem(item);
                }, this);
            } else {
                this.addItem(newItemObjects);
            }
        },
        /**
         * Adds an item to the SuperBoxSelect component if the {@link #Ext.ux.form.SuperBoxSelect-allowAddNewData} config is set to true.
         * @methodOf Ext.ux.form.SuperBoxSelect
         * @name addItem
         * @param {Object} newItemObject An object literal containing the property names and values for an item. The property names must match those specified in {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField} 
         */
        addItem : function(newItemObject){
            
            var val = newItemObject[this.valueField];
    
            if(this.disabled) {
                return false;
            }
            if(this.preventDuplicates && this.hasValue(val)){
                return;
            }
            
            //use existing record if found
            var record = this.findRecord(this.valueField, val);
            if (record) {
                this.addRecord(record);
                return;
            } else if (!this.allowAddNewData) { // else it's a new item
                return;
            }
            
            if(this.mode === 'remote'){
                this.remoteLookup.push(newItemObject); 
                this.doQuery(val,false,false);
                return;
            }
            
            var rec = this.createRecord(newItemObject);
            this.store.add(rec);
            this.addRecord(rec);
            
            return true;
        },
        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)]);
                        }
                        this.preventMultipleRemoveEvents = false;
                    },
                    destroy: function(){
                        this.collapse();
                        this.autoSize().manageClearBtn().validateValue();
                    },
                    scope: this
                }
            });
            box.render();
    
            box.hidden = this.el.insertSibling({
                tag:'input', 
                type:'hidden', 
                value: itemVal,
                name: (this.hiddenName || this.name)
            },'before');
    
            this.items.add(itemKey,box);
            this.applyEmptyText().autoSize().manageClearBtn().validateValue();
        },
        manageClearBtn : function() {
            if (!this.renderFieldBtns || !this.rendered) {
                return this;
            }
            var cls = 'x-superboxselect-btn-hide';
            if (this.items.getCount() === 0) {
                this.buttonClear.addClass(cls);
            } else {
                this.buttonClear.removeClass(cls);
            }
            return this;
        },
        findInStore : function(val){
            var index = this.store.find(this.valueField, val.trim());
            if(index > -1){
                return this.store.getAt(index);
            }
            return false;
        },
        /**
         * Returns a String value containing a concatenated list of item values. The list is concatenated with the {@link #Ext.ux.form.SuperBoxSelect-valueDelimiter}.
         * @methodOf Ext.ux.form.SuperBoxSelect
         * @name getValue
         * @return {String} a String value containing a concatenated list of item values. 
         */
        getValue : function() {
            var ret = [];
            this.items.each(function(item){
                ret.push(item.value);
            });
            return ret.join(this.valueDelimiter);
        },
        /**
         * Iterates and selects all elements available
         * Must take into consideration the ones that are already selected plus the ones from the store.
         */
        selectAll: function(){
            var ret = this.getValuesAsArray();
            Ext.iterate(this.store.data.items,function(item){
                ret.push(item.data.name)
            });
            if(!Ext.isEmpty(ret)){
                this.setValue(ret.join(this.valueDelimiter));
            }
        },
        /**
         * Returns a String value containing a concatenated list of item values. The list is concatenated with the {@link #Ext.ux.form.SuperBoxSelect-valueDelimiter}.
         * @methodOf Ext.ux.form.SuperBoxSelect
         * @name getValue
         * @return {String} a String value containing a concatenated list of item values. 
         */
        getValuesAsArray : function() {
            var ret = [];
            this.items.each(function(item){
                ret.push(item.value);
            });
            return ret;
        },
        /**
         * Returns an Array of item objects containing the {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField} properties.
         * @methodOf Ext.ux.form.SuperBoxSelect
         * @name getValueEx
         * @return {Array} an array of item objects. 
         */
        getValueEx : function() {
            var ret = [];
            this.items.each(function(item){
                var newItem = {};
                newItem[this.valueField] = item.value;
                newItem[this.displayField] = item.display;
                newItem[this.classField]= item.cls;
                ret.push(newItem);
            },this);
            return ret;
        },
        // private
        initValue : function(){
     
            Ext.ux.form.SuperBoxSelect.superclass.initValue.call(this);
            if(this.mode === 'remote') {
                this.setOriginal = true;
            }
        },
        /**
         * Sets the value of the SuperBoxSelect component.
         * @methodOf Ext.ux.form.SuperBoxSelect
         * @name setValue
         * @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) 
         */
        setValue : 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 setValue 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
            }
            
        },
        /**
         * Sets the value of the SuperBoxSelect component, adding new items that don't exist in the data store if the {@link #Ext.ux.form.SuperBoxSelect-allowAddNewData} config is set to true.
         * @methodOf Ext.ux.form.SuperBoxSelect
         * @name setValue
         * @param {Array} data An Array of item objects containing the {@link #Ext.ux.form.SuperBoxSelect-displayField}, {@link #Ext.ux.form.SuperBoxSelect-valueField} and {@link #Ext.ux.form.SuperBoxSelect-classField} properties.  
         */
        setValueEx : function(data){
            this.removeAllItems().resetStore();
            
            if(!Ext.isArray(data)){
                data = [data];
            }
            Ext.each(data,function(item){
                this.addItem(item);
            },this);
        },
        /**
         * Returns true if the SuperBoxSelect component has a selected item with a value matching the 'val' parameter.
         * @methodOf Ext.ux.form.SuperBoxSelect
         * @name hasValue
         * @param {Mixed} val The value to test.
         * @return {Boolean} true if the component has the selected value, false otherwise.
         */
        hasValue: function(val){
            var has = false;
            this.items.each(function(item){
                if(item.value == val){
                    has = true;
                    return false;
                }
            },this);
            return has;
        },
        onSelect : function(record, index) {
            var val = record.data[this.valueField];
            
            if(this.preventDuplicates && this.hasValue(val)){
                return;
            }
            
            this.setRawValue('');
            this.lastSelectionText = '';
            
            if(this.fireEvent('beforeadditem',this,val) !== false){
                this.addRecord(record);
            }
            if(this.store.getCount() === 0 || !this.multiSelectMode){
                this.collapse();
            }else{
                this.restrictHeight();
            }
        },
        onDestroy : function() {
            this.items.each(function(item) {
                item.preDestroy(true);
            }, this);
    
            if (this.renderFieldBtns) {
                Ext.destroy(
                    this.buttonClear,
                    this.buttonExpand,
                    this.buttonWrap
                );
            }
    
            Ext.destroy(
                this.inputEl,
                this.wrapEl,
                this.outerWrapEl
            );
    
            Ext.ux.form.SuperBoxSelect.superclass.onDestroy.call(this);
        },
        autoSize : function(){
            if(!this.rendered){
                return this;
            }
            if(!this.metrics){
                this.metrics = Ext.util.TextMetrics.createInstance(this.el);
            }
            var el = this.el,
                v = el.dom.value,
                d = document.createElement('div');
    
            if(v === "" && this.emptyText && this.items.getCount() < 1){
                v = this.emptyText;
            }
            d.appendChild(document.createTextNode(v));
            v = d.innerHTML;
            d = null;
            v += "&#160;";
            var w = Math.max(this.metrics.getWidth(v) +  24, 24);
            if(typeof this._width != 'undefined'){
                w = Math.min(this._width, w);
            }
            this.el.setWidth(w);
            
            if(Ext.isIE){
                this.el.dom.style.top='0';
            }
            return this;
        },
        doQuery : function(q, forceAll,valuesQuery){
            q = Ext.isEmpty(q) ? '' : q;
            var qe = {
                query: q,
                forceAll: forceAll,
                combo: this,
                cancel:false
            };
            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.onLoad();
                    }else{
                        
                        this.store.baseParams[this.queryParam] = q;
                        this.store.baseParams[this.queryValuesInidicator] = valuesQuery;
                        this.store.load({
                            params: this.getParams(q)
                        });
                        this.expand();
                    }
                }else{
                    this.selectedIndex = -1;
                    this.onLoad();
                }
            }
        }
    });
    Ext.reg('superboxselect', Ext.ux.form.SuperBoxSelect);
    /*
     * @private
     */
    Ext.ux.form.SuperBoxSelectItem = function(config){
        Ext.apply(this,config);
        Ext.ux.form.SuperBoxSelectItem.superclass.constructor.call(this); 
    };
    /*
     * @private
     */
    Ext.ux.form.SuperBoxSelectItem = Ext.extend(Ext.ux.form.SuperBoxSelectItem,Ext.Component, {
        initComponent : function(){
            Ext.ux.form.SuperBoxSelectItem.superclass.initComponent.call(this); 
        },
        onElClick : function(e){
            var o = this.owner;
            o.clearCurrentFocus().collapse();
            if(o.navigateItemsWithTab){
                this.focus();
            }else{
                o.el.dom.focus();
                var that = this;
                (function(){
                    this.onLnkFocus();
                    o.currentFocus = this;
                }).defer(10,this);
            }
        },
        
        onLnkClick : function(e){
            if(e) {
                e.stopEvent();
            }
            this.preDestroy();
            if(!this.owner.navigateItemsWithTab){
                this.owner.el.focus();
            }
        },
        onLnkFocus : function(){
            this.el.addClass("x-superboxselect-item-focus");
            this.owner.outerWrapEl.addClass("x-form-focus");
        },
        
        onLnkBlur : function(){
            this.el.removeClass("x-superboxselect-item-focus");
            this.owner.outerWrapEl.removeClass("x-form-focus");
        },
        
        enableElListeners : function() {
            this.el.on('click', this.onElClick, this, {stopEvent:true});
           
            this.el.addClassOnOver('x-superboxselect-item-hover');;
        },
    
        enableLnkListeners : function() {
            this.lnk.on({
                click: this.onLnkClick,
                focus: this.onLnkFocus,
                blur:  this.onLnkBlur,
                scope: this
            });
        },
        
        enableAllListeners : function() {
            this.enableElListeners();
            this.enableLnkListeners();
        },
        disableAllListeners : function() {
            this.el.removeAllListeners();
            this.lnk.un('click', this.onLnkClick, this);
            this.lnk.un('focus', this.onLnkFocus, this);
            this.lnk.un('blur', this.onLnkBlur, this);
        },
        onRender : function(ct, position){
            
            Ext.ux.form.SuperBoxSelectItem.superclass.onRender.call(this, ct, position);
            
            var el = this.el;
            if(el){
                el.remove();
            }
            
            this.el = el = ct.createChild({ tag: 'li' }, ct.last());
            el.addClass('x-superboxselect-item');
            
            var btnEl = this.owner.navigateItemsWithTab ? ( Ext.isSafari ? 'button' : 'a') : 'span';
            var itemKey = this.key;
            
            Ext.apply(el, {
                focus: function(){
                    var c = this.down(btnEl +'.x-superboxselect-item-close');
                    if(c){
                        c.focus();
                    }
                },
                preDestroy: function(){
                    this.preDestroy();
                }.createDelegate(this)
            });
            
            this.enableElListeners();
    
            el.update(this.caption);
    
            var cfg = {
                tag: btnEl,
                'class': 'x-superboxselect-item-close',
                tabIndex : this.owner.navigateItemsWithTab ? '0' : '-1'
            };
            if(btnEl === 'a'){
                cfg.href = '#';
            }
            this.lnk = el.createChild(cfg);
            
            
            if(!this.disabled) {
                this.enableLnkListeners();
            }else {
                this.disableAllListeners();
            }
            
            this.on({
                disable: this.disableAllListeners,
                enable: this.enableAllListeners,
                scope: this
            });
    
            this.setupKeyMap();
        },
        setupKeyMap : function(){
            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(){
                    }
                }
            ]).stopEvent = true;
        },
        moveFocus : function(dir) {
            var el = this.el[dir == 'left' ? 'prev' : 'next']() || this.owner.el;
        
            el.focus.defer(100,el);
        },
    
        preDestroy : function(supressEffect) {
            if(this.fireEvent('remove', this) === false){
                return;
            }    
            var actionDestroy = function(){
                if(this.owner.navigateItemsWithTab){
                    this.moveFocus('right');
                }
                this.hidden.remove();
                this.hidden = null;
                this.destroy();
            };
            
            if(supressEffect){
                actionDestroy.call(this);
            } else {
                this.el.hide({
                    duration: 0.2,
                    callback: actionDestroy,
                    scope: this
                });
            }
            return this;
        },
        onDestroy : function() {
            Ext.destroy(
                this.lnk,
                this.el
            );
            
            Ext.ux.form.SuperBoxSelectItem.superclass.onDestroy.call(this);
        }
    });
    Code:
    @charset "utf-8";
    .x-superboxselect {position:relative; margin: 0px; overflow: auto; padding:2px; display:block; outline: none !important;}
    .x-superboxselect input[disabled] {background-color: transparent;};
    .x-superboxselect ul {overflow: hidden; cursor: text;}
    .x-superboxselect-display-btns {padding-right: 33px !important;}
    .x-superboxselect-btns {position: absolute; right: 1px; top: 0; overflow:hidden; padding:2px;}
    .x-superboxselect-btns div {float: left; width: 16px; height: 16px; margin-top: 4px;}
    .x-superboxselect-btn-clear {background: url(../images/clear.png) no-repeat scroll left 0px;}
    .x-superboxselect-btn-expand {background: url(../images/expand.png) no-repeat scroll left 0px;}
    .x-superboxselect-btn-over {background-position: left -16px}
    .x-superboxselect-btn-hide {display:none;}
    .x-superboxselect li {float: left; margin: 1px 1px 2px 1px; padding: 0;line-height: 18px;}
    .x-superboxselect-stacked li {float: none !important;}
    .x-superboxselect-input input { border: none; outline: none; margin-top: 4px; margin-bottom: 4px;}
    body.ext-ie .x-superboxselect-input input {background: none; border: none; margin-top: 3px;}
    .x-superboxselect-item {position: relative; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; o-border-radius: 6px; khtml-border-radius: 6px; border: 1px solid #CAD8F3; background-color: #DEE7F8; padding: 1px 15px 1px 5px !important; }
    body.ext-ie7 .x-superboxselect-item {margin: 2px 1px 2px 1px; line-height: 1.2em; padding: 2px 17px 4px 5px !important;}
    body.ext-ie6 .x-superboxselect-item {margin: 2px 1px 2px 1px; line-height: 1.2em; padding: 2px 19px 4px 5px !important;}
    .x-superboxselect-item-hover {background: #BBCEF1; border: 1px solid #6D95E0;}
    .x-superboxselect-item-focus {border-color: #598BEC; background: #598BEC; color: #fff;}
    .x-superboxselect-item-close {background: url(../images/close.png) no-repeat scroll left 0px; border: none; cursor: default; font-size: 1px; height: 16px;padding:0; position: absolute; right: 0px; top: 2px; width: 13px;display:block;cursor:pointer;}
    
    .x-superboxselect-item-close:hover, .x-superboxselect-item-close:active  { background-position: left -12px;}
    .x-superboxselect-item-focus .x-superboxselect-item-close{ background-position: left -24px}
    .x-item-disabled .x-superboxselect-item-close{ background-position: left -36px}

  8. #218
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    I'm having the same issues...


    Quote Originally Posted by polydyne View Post
    Hello,
    We have recently upgraded from Ext 3.0 to 3.2.1 and everything seems to be working fine ofcourse not without a few changes. However with superboxselect user extension we are seeing some weird behavior. It worked fine with previous ext version.

    We have 2 superboxselectboxes on a filter window. e.g. filter by part number and filter by commodity.. now when u open the filter window for the first time both the boxes work and you can see the selections and change the selections etc. but then you filter the records and open the filter window again, the first selected superbox does not expand any more. the other superbox works fine.

    I am attaching the code here, please take a look and help me out here.. thanks much.

    Here is how I am opening the filter window..
    Code:
    handler: function(){
                                    if (!filterWin) {
                                            filterWin = new Ext.Window({
                                                title: 'Awards Filter',
                                                width: 500,
                                                autoHeight: true,
                                                closeAction:'hide',
                                                border: true,
                                                bodyBorder: false,
                                                autoScroll: true,
                                                modal: true,
                                                bodyStyle:'padding:5px 5px  5px 5px',
                                                items:  [awardsFilterFormPanel],
                                                layout: 'form'
                                            });
                                        }
                                        filterWin.show();
                                        filterWin.center();
                                }
    Here is my awardsFilterFormPanel..
    Code:
    var awardsFilterFormPanel = new Ext.FormPanel({
                id:'awardsFilterForm',
                frame:true,
                autoHeight: true,
                items: [
                    {
                        allowBlank: true,
                        id:'display_parts_combo',
                        xtype:'combo',
                        fieldLabel: 'View By',
                        resizable: true,
                        name: 'display_parts_combo',
                        width: 350,
                        store: displayPartsStore,
                        mode: 'local',
                        triggerAction: 'all',
                        displayField: 'value',
                        hiddenName:'id',
                        valueField: 'id',
                        forceSelection : true,
                        allowBlank: false,
                        value:'<%=displayPartsId%>'
                    },
                    {
                        allowBlank: true,
                        id:'filter_part_number_combo',
                        xtype:'superboxselect',
                        fieldLabel: 'Part Numbers',
                        emptyText: 'Select Part Number',
                        resizable: true,
                        name: 'filter_part_number_combo',
                        width: 350,
                        store: partsStore,
                        mode: 'local',
                        displayField: 'part_name',
                        displayFieldTpl: '{part_name}',
                        valueField: 'part_id',
                        forceSelection: true,
                        value: '<%=partSelections%>'
                    },
                    {
                        allowBlank: true,
                        id:'filter_commodity_combo',
                        xtype:'superboxselect',
                        fieldLabel: 'Commodities',
                        emptyText: 'Select Commodity',
                        resizable: true,
                        name: 'filter_commodity_combo',
                        width: 350,
                        store: filterCommodityComboStore,
                        mode: 'local',
                        displayField: 'commodity_code',
                        displayFieldTpl: '{commodity_code}',
                        valueField: 'commodity_id',
                        forceSelection : true,
                        value: '<%=commSelections%>'
                    },
                    {
                        xtype: 'checkbox',
                        id: 'chk_sub_commodities',
                        fieldLabel: 'Include Sub Commodities',
                        boxLabel: '',
                        name: 'chk_sub_commodities',
                        checked:  <%=includeSubCommodities.booleanValue()%>
                    }],
                    buttons: [
                        {xtype: 'tbfill'},
                        {
                            text: 'Filter',
                            formBind: true,
                            handler: function(){
                                if(true){
                                    awardsFilterFormPanel.getForm().submit({
                                        url:  '<%=awardsFilterFormUrl%>',
                                        method: 'POST',
                                        waitMsg: '<%=waitMsgStr%>',
                                        success: function(form, action){
                                            awardsPricingStore.reload();
                                            filterWin.hide();
                                        },
                                        failure: function(form, action){
                                            //TO DO:
                                            //add failure code
                                        }
                                    });
                                }
                            }
                        },
                        {
                            text: 'Reset Filter',
                            formBind: true,
                            handler: function(){
                                {
                                    var conn = new Ext.data.Connection();
                                    conn.request({
                                        waitMsg: '<%=waitMsgStr%>',
                                        url:  '<%=resetAwardsFilterURL%>',
                                        method: 'POST',
                                        callback:  function(opt,success,responseObj){
                                            if (success) {
                                                var responseData =  Ext.util.JSON.decode(responseObj.responseText);
                                                if ( responseData.success ==  true ) {
                                                     awardsFilterFormPanel.getForm().reset();
                                                     Ext.getCmp('filter_commodity_combo').clearValue();
                                                     Ext.getCmp('chk_sub_commodities').setValue('false');
                                                     awardsPricingStore.reload();
                                                    filterWin.hide();
                                                }
                                            } else {
                                                Ext.Msg.alert('Error',  'Filter could not be reset, Please try again!');
                                            }
                                        }
                                 });
                                }
                            }
                        },
                        {
                            text: 'Cancel',
                            handler: function(){
                                filterWin.hide();
                            }
                        }]
            });
    The issue may be is something to do with z-index value rendered by ext..

  9. #219
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

  10. #220
    Sencha User
    Join Date
    Apr 2007
    Location
    Italy/UK
    Posts
    152
    Vote Rating
    0
    sj137 is on a distinguished road

      0  

    Default


    hi guys, first of all great great component, if there were awards for best Ext.ux user component then the SBS would be a clear winner in my book!!

    that said i'm having a small problem with the SBS when added in a toolbar, the problem only occurs in IE6, IE7 and some versions of IE8...

    the box area doesn't expand to fit the number of items, instead it always stays a fixed height of 20px....

    i've tried everything i can think of to try and solve the issue, but unfortunately css and IE hacks aren't my forte...

    has anyone encountered this or know of a solutions

    any help is much appreciated!!

    SJ

Thread Participants: 94

  1. Animal (3 Posts)
  2. jay@moduscreate.com (1 Post)
  3. Condor (1 Post)
  4. stever (1 Post)
  5. mystix (5 Posts)
  6. MD (1 Post)
  7. JorisA (1 Post)
  8. randomY (1 Post)
  9. DigitalSkyline (1 Post)
  10. sj137 (3 Posts)
  11. boggle (1 Post)
  12. danh2000 (71 Posts)
  13. ostghost (1 Post)
  14. lossendae (1 Post)
  15. ZooKeeper (1 Post)
  16. greco (1 Post)
  17. Fredric Berling (1 Post)
  18. GraemeBryce (2 Posts)
  19. Strati (2 Posts)
  20. syscobra (2 Posts)
  21. boonkerz (4 Posts)
  22. Sesshomurai (3 Posts)
  23. shamansoft (1 Post)
  24. dorgan (2 Posts)
  25. mjhaston (1 Post)
  26. radtad (5 Posts)
  27. Joyfulbob (2 Posts)
  28. crysfel (1 Post)
  29. armandoxxx (2 Posts)
  30. jarlau (1 Post)
  31. lacco (1 Post)
  32. abraxxa (38 Posts)
  33. prometheus (1 Post)
  34. pops (1 Post)
  35. raphac (1 Post)
  36. Scorpie (2 Posts)
  37. supercharge2 (4 Posts)
  38. jmiguel (2 Posts)
  39. ash11tw (2 Posts)
  40. wojan (1 Post)
  41. ryzmen (1 Post)
  42. nmohler (2 Posts)
  43. wki01 (2 Posts)
  44. gacowarlock (1 Post)
  45. kora.kanchan (1 Post)
  46. senacle (3 Posts)
  47. genie_vn (1 Post)
  48. sergey.s (1 Post)
  49. Grolubao (10 Posts)
  50. mathec (1 Post)
  51. jackjia (1 Post)
  52. polydyne (1 Post)
  53. Antjac (1 Post)
  54. Thomas Triplet (1 Post)
  55. Gonfi (1 Post)
  56. kleins (1 Post)
  57. talha06 (1 Post)
  58. scishop (1 Post)
  59. eztam (2 Posts)
  60. frederickd (10 Posts)
  61. dusoo (2 Posts)
  62. iv_ekker (3 Posts)
  63. pym (1 Post)
  64. sudhirhv (3 Posts)
  65. lanhun (14 Posts)
  66. wcasado (1 Post)
  67. ramana_l_v (3 Posts)
  68. cq.yangyu@gmail.com (1 Post)
  69. siberian (1 Post)
  70. Tommi (4 Posts)
  71. rdblyth (2 Posts)
  72. devtig (3 Posts)
  73. markmansour (1 Post)
  74. dhiren.lodhia (1 Post)
  75. slamhan (1 Post)
  76. panter4 (1 Post)
  77. Korbin (2 Posts)
  78. istetska (1 Post)
  79. ian.young (1 Post)
  80. sebterzi (1 Post)
  81. ucoxk (1 Post)
  82. prakashr (1 Post)
  83. danilo.pederiva (1 Post)
  84. --miCZar-- (2 Posts)
  85. zozofoz (1 Post)
  86. spydercavern (1 Post)
  87. tvelykyy (1 Post)
  88. leorossi (3 Posts)
  89. revertTS (1 Post)
  90. joxzaren (1 Post)
  91. leduc (1 Post)
  92. deepthi_r (1 Post)
  93. qiankun (1 Post)
  94. Mr.Solomon (2 Posts)
Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi