1. #391
    Sencha User
    Join Date
    Apr 2010
    Posts
    1
    Vote Rating
    0
    rachid.abdessamad is on a distinguished road

      0  

    Default


    Quote Originally Posted by Eric24 View Post
    Superboxselect for Ext 3.3.x is available here: http://www.sencha.com/forum/showthre...SuperBoxSelect

    Ext 4.0 support is planned (no release date yet, but it is a certainty).
    First of all, Thanks for this amazing plugin
    Have you planned a release date to support extjs 4 ?

  2. #392
    Sencha User
    Join Date
    Jun 2010
    Posts
    5
    Vote Rating
    0
    ian.young is on a distinguished road

      0  

    Default


    I really need clarification on the license terms, because effectively, without explicit authorization, it's illegal for anyone to use this extension anywhere.

  3. #393
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    Can I set my values from a remote store? Something like:

    Code:
    value : new Ext.data.JsonStore({ })
    Depending on the user I may need to default their list for them.

  4. #394
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    sebholl is on a distinguished road

      0  

    Question What License??? :(

    What License??? :(


    *bump*

    I too would really love to use this control, but I need to have the license confirmed to determine whether it can be used in a project. If it's public domain or something effectively as "free-as-in-speech", you've just made my day. Otherwise, I may have to re-invent a rusty wooden wheel when a brand new Michelin is sitting there.

  5. #395
    Sencha User
    Join Date
    May 2007
    Posts
    24
    Vote Rating
    1
    gigel is on a distinguished road

      0  

    Default


    My small changes:

    - added event "autoSize": so I can automatically resize my form to fit the bigger/smaller field
    - added event "addItemBox": so I can easily attach a tooltip to an item when its added to a particular list
    - removed the line of code which was adding a highlight, but not removing it on mouseout
    - the CSS code makes the field look like a regular ExtJS field (same height) and the shades of gray makes it integrate better with the default gray theme
    - made "itemDelimiterKey" to be an Array, to be able to use multiple keys (initializing your field with "itemDelimiterKey: [Ext.EventObject.TAB, Ext.EventObject.ENTER]" would allow you to use either TAB or ENTER for adding a new item)

    Wish list:

    - it would be very nice if the field wouldn't expand, but instead use some sort of overflow system like the toolbar component
    - it would be nice to use the combobox's default trigger button instead of the custom down arrow, which makes the component look less extjs-like

    PHP 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',
             
    /**
             * Fires when autoSize is called
             * @event clear
             * @memberOf Ext.ux.form.SuperBoxSelect
             * @param {SuperBoxSelect} this
             */
            
    'autoSize',
            
    /**
             * Fires when addItemBox is called
             * @event clear
             * @memberOf Ext.ux.form.SuperBoxSelect
             * @param {SuperBoxSelect} this
             * @param {SuperBoxSelectItem} the added box
             */
            
    'addItemBox'
        
    );
        
    };
    /**
     * @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.
         */
        
    allowAddNewDatafalse,

        
    /**
         * @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.
         */
        
    backspaceDeletesLastItemtrue,

        
    /**
         * @cfg {String} classField The underlying data field that will be used to supply an additional class to each item.
         */
        
    classFieldnull,

        
    /**
         * @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.
         */
        
    displayFieldTplnull,

        
    /**
         * @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.
         */
        
    fixFocusOnTabSelecttrue,
        
         
    /**
         * @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.  
         */
        
    forceFormValuetrue,
        
    /**
         * @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.
         */
        
    navigateItemsWithTabtrue,

        
    /**
         * @cfg {Boolean} pinList When set to true the select list will be pinned to allow for multiple selections. Defaults to true.
         */
        
    pinListtrue,

        
    /**
         * @cfg {Boolean} preventDuplicates When set to true unique item values will be enforced. Defaults to true.
         */
        
    preventDuplicatestrue,
        
        
    /**
         * @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.
         */
        
    removeValuesFromStoretrue,

        
    /**
         * @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.
         */
        
    renderFieldBtnstrue,

        
    /**
         * @cfg {Boolean} stackItems When set to true, the items will be stacked 1 per line. Defaults to false which displays the items inline.
         */
        
    stackItemsfalse,

        
    /**
         * @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({
                   
    addthis.manageNameAttribute,
                   
    removethis.manageNameAttribute,
                   
    clearthis.manageNameAttribute,
                   
    scopethis
                
    });
            }
            
            
    Ext.ux.form.SuperBoxSelect.superclass.initComponent.call(this);
            if(
    this.mode === 'remote' && this.store){
                
    this.store.on('load'this.onStoreLoadthis);
            }
        },
        
    onRender:function(ctposition) {
            var 
    this.hiddenName;
            
    this.hiddenName null;
            
    Ext.ux.form.SuperBoxSelect.superclass.onRender.call(thisctposition);
            
    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(storerecordsoptions){
            
    //accomodating for bug in Ext 3.0.0 where options.params are empty
            
    var 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(!== '' && 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(
    === ''){
                
    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() === && this.isExpanded()){
                
    this.collapse();
            }
            
        },
        
    doTransform : function() {
            var 
    Ext.getDom(this.transform), transformValues = [];
                if(!
    this.store){
                    
    this.mode 'local';
                    var 
    = [], opts s.options;
                    for(var 
    0len opts.length;leni++){
                        var 
    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([valueo.textclstypeof(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({
                
    collapsethis.onCollapse,
                
    expandthis.clearCurrentFocus,
                
    scopethis
            
    });

            
    this.wrapEl.on('click'this.onWrapClickthis);
            
    this.outerWrapEl.on('click'this.onWrapClickthis);
            
            
    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(false10);
                        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();
        },

        
    beforeBlurExt.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 
    elpt;

            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.errorElthis);
                    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.alignErrorIconthis);
                    break;
                default:
                    
    Ext.getDom(this.msgTarget);
                    
    t.innerHTML msg;
                    
    t.style.display this.msgDisplay;
                    break;
            }
            
    this.fireEvent('invalid'thismsg);
        },
        
    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.errorElthis);
                    }
                    break;
                case 
    'side':
                    if(
    this.errorIcon){
                        
    this.errorIcon.dom.qtip '';
                        
    this.errorIcon.hide();
                        
    this.un('resize'this.alignErrorIconthis);
                    }
                    break;
                default:
                    var 
    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 23]);
            }
        },
        
    expand : function(){
            if (
    this.isExpanded() || !this.hasFocus) {
                return;
            }
            
    this.list.alignTo(this.outerWrapElthis.listAlign).show();
            
    this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
            
    Ext.getDoc().on({
                
    mousewheelthis.collapseIf,
                
    mousedownthis.collapseIf,
                
    scopethis
            
    });
            
    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,
                
    Math.max(inner.clientHeightinner.offsetHeightinner.scrollHeight),
                
    ha this.getPosition()[1]-Ext.getBody().getScroll().top,
                
    hb Ext.lib.Dom.getViewHeight()-ha-this.getSize().height,
                
    space Math.max(hahbthis.minHeight || 0)-list.shadowOffset-pad-5;
            
            
    Math.min(hspacethis.maxHeight);
            
    this.innerList.setHeight(h);

            list.
    beginUpdate();
            list.
    setHeight(h+pad);
            list.
    alignTo(this.outerWrapElthis.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() === && 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(whrwrh) {
            var 
    reduce Ext.isIE6 Ext.isIE7 Ext.isIE8 0;
            if(
    this.wrapEl){
                
    this._width w;
                
    this.outerWrapEl.setWidth(reduce);
                if (
    this.renderFieldBtns) {
                    
    reduce += (this.buttonWrap.getWidth() + 20);
                    
    this.wrapEl.setWidth(reduce);
            }
            }
            
    Ext.ux.form.SuperBoxSelect.superclass.onResize.call(thiswhrwrh);
            
    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) && this.itemDelimiterKey.indexOf(e.getKey()) === -&& (!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,{singletrue});
                
    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.valueitctrl e.ctrlKey;
            if(
    this.itemDelimiterKey.indexOf(e.getKey()) !== -1){
                
    e.stopEvent();
                if (
    val !== "") {
                    if (
    ctrl || !this.isExpanded())  {  //ctrl+enter for new items
                        
    this.view.clearSelections();
                        
    this.collapse();
                        
    this.setRawValue('');
                        
    this.fireEvent('newitem'thisval);
                    }
                    else {
                        
    this.onViewClick();
                        
    //removed from 3.0.1
                        
    if(this.unsetDelayCheck){
                            
    this.delayedCheck true;
                            
    this.unsetDelayCheck.defer(10this);
                        }
                    }
                }else{
                    if(!
    this.isExpanded()){
                        return;
                    }
                    
    this.onViewClick();
                    
    //removed from 3.0.1
                    
    if(this.unsetDelayCheck){
                        
    this.delayedCheck true;
                        
    this.unsetDelayCheck.defer(10this);
                    }
                }
                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,{singletrue});
                    
                    
    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,{singletrue});
                            
    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,{singletrue});
                            }
                        }
                    }
                    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.fieldss.direction);
            }
            return 
    this;
        },
        
    getCaption: function(dataObject){
            if(
    typeof this.displayFieldTpl === 'string') {
                
    this.displayFieldTpl = new Ext.XTemplate(this.displayFieldTpl);
            }
            var 
    captionrecordData 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(valrecord);
                
    this.store.remove(record);
            }
            
            
    this.addItemBox(valdisplaycaptionclsstyle);
            
    this.fireEvent('additem'thisvalrecord);
        },
        
    createRecord : function(recordData){
            if(!
    this.recordConstructor){
                var 
    recordFields = [
                    {
    namethis.valueField},
                    {
    namethis.displayField}
                ];
                if(
    this.classField){
                    
    recordFields.push({namethis.classField});
                }
                if(
    this.styleField){
                    
    recordFields.push({namethis.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.valueFieldval);
            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,itemCaptionitemClassitemStyle) {
            var 
    hConfigparseStyle = function(s){
                var 
    ret '';
                if(
    typeof s == 'function'){
                    
    ret s.call();
                }else if(
    typeof s == 'object'){
                    for(var 
    p in s){
                        
    ret+= +':'+s[p]+';';
                    }
                }else if(
    typeof s == 'string'){
                    
    ret ';';
                }
                return 
    ret;
            }, 
    itemKey Ext.id(null,'sbx-item'), box = new Ext.ux.form.SuperBoxSelectItem({
                
    ownerthis,
                
    disabledthis.disabled,
                
    renderTothis.wrapEl,
                
    clsthis.extraItemCls ' ' itemClass,
                
    styleparseStyle(this.extraItemStyle) + ' ' itemStyle,
                
    captionitemCaption,
                
    displayitemDisplay,
                
    value:  itemVal,
                
    keyitemKey,
                
    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.valuethis.findInStore(item.value)]);
                        }
                    },
                    
    destroy: function(){
                        
    this.collapse();
                        
    this.autoSize().manageClearBtn().validateValue();
                    },
                    
    scopethis
                
    }
            });
            
    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();
            
    this.fireEvent('addItemBox'thisbox);
        },
        
    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.valueFieldval);
            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.valueFieldval);
                if(
    record){
                    
    this.addRecord(record);
                }else if(
    this.mode === 'remote'){
                    
    this.remoteLookup.push(val);                
                }
            },
    this);
            
            if(
    this.mode === 'remote'){
                  var 
    this.remoteLookup.join(this.queryValuesDelimiter); 
                  
    this.doQuery(q,falsetrue); //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 
    this.findRecord(this.valueFieldd[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(recordindex) {
            if (
    this.fireEvent('beforeselect'thisrecordindex) !== 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() === || !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,
                
    el.dom.value,
                
    document.createElement('div');

            if(
    === "" && this.emptyText && this.items.getCount() < 1){
                
    this.emptyText;
            }
            
    d.appendChild(document.createTextNode(v));
            
    d.innerHTML;
            
    null;
            
    += " ";
            var 
    Math.max(this.metrics.getWidth(v) +  2424);
            if(
    typeof this._width != 'undefined'){
                
    Math.min(this._widthw);
            }
            
    this.el.setWidth(w);
            
            if(
    Ext.isIE){
                
    this.el.dom.style.top='0';
            }
            
    this.fireEvent('autoSize',this);
            return 
    this;
        },
        
    doQuery : function(qforceAll,valuesQueryforcedAdd){
            
    Ext.isEmpty(q) ? '' q;
            var 
    qe = {
                
    queryq,
                
    forceAllforceAll,
                
    combothis,
                
    cancel:false
            
    };
            if(
    this.fireEvent('beforequery'qe)===false || qe.cancel){
                return 
    false;
            }
            
    qe.query;
            
    forceAll qe.forceAll;
            if(
    forceAll === true || (q.length >= this.minChars) || valuesQuery && !Ext.isEmpty(q)){
                if(
    this.lastQuery !== || forcedAdd){
                    
    this.lastQuery q;
                    if(
    this.mode == 'local'){
                        
    this.selectedIndex = -1;
                        if(
    forceAll){
                            
    this.store.clearFilter();
                        }else{
                            
    this.store.filter(this.displayFieldq);
                        }
                        
    this.onLoad();
                    }else{
                        
                        
    this.store.baseParams[this.queryParam] = q;
                        
    this.store.baseParams[this.queryValuesIndicator] = valuesQuery;
                        
    this.store.load({
                            
    paramsthis.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 
    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.onElClickthis, {stopEvent:true});
            
    //this.el.addClassOnOver('x-superboxselect-item x-superboxselect-item-hover');
        
    },

        
    enableLnkListeners : function() {
            
    this.lnk.on({
                
    clickthis.onLnkClick,
                
    focusthis.onLnkFocus,
                
    blur:  this.onLnkBlur,
                
    scopethis
            
    });
        },
        
        
    enableAllListeners : function() {
            
    this.enableElListeners();
            
    this.enableLnkListeners();
        },
        
    disableAllListeners : function() {
            
    this.el.removeAllListeners();
            
    this.lnk.un('click'this.onLnkClickthis);
            
    this.lnk.un('focus'this.onLnkFocusthis);
            
    this.lnk.un('blur'this.onLnkBlurthis);
        },
        
    onRender : function(ctposition){
            
            
    Ext.ux.form.SuperBoxSelectItem.superclass.onRender.call(thisctposition);
            
            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 
    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 = {
                
    tagbtnEl,
                
    '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({
                
    disablethis.disableAllListeners,
                
    enablethis.enableAllListeners,
                
    scopethis
            
    });

            
    this.setupKeyMap();
        },
        
    setupKeyMap : function(){
            
    this.keyMap = new Ext.KeyMap(this.lnk, [
                {
                    
    key: [
                        
    Ext.EventObject.BACKSPACE
                        
    Ext.EventObject.DELETE
                        
    Ext.EventObject.SPACE
                    
    ],
                    
    fnthis.preDestroy,
                    
    scopethis
                
    }, {
                    
    key: [
                        
    Ext.EventObject.RIGHT,
                        
    Ext.EventObject.DOWN
                    
    ],
                    
    fn: function(){
                        
    this.moveFocus('right');
                    },
                    
    scopethis
                
    },
                {
                    
    key: [Ext.EventObject.LEFT,Ext.EventObject.UP],
                    
    fn: function(){
                        
    this.moveFocus('left');
                    },
                    
    scopethis
                
    },
                {
                    
    key: [Ext.EventObject.HOME],
                    
    fn: function(){
                        var 
    this.owner.items.get(0).el.focus();
                        if(
    l){
                            
    l.el.focus();
                        }
                    },
                    
    scopethis
                
    },
                {
                    
    key: [Ext.EventObject.END],
                    
    fn: function(){
                        
    this.owner.el.focus();
                    },
                    
    scopethis
                
    },
                {
                    
    keyExt.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({
                    
    duration0.2,
                    
    callbackactionDestroy,
                    
    scopethis
                
    });
            }
            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);
        }
    }); 
    PHP Code:
    .x-superboxselect {position:relativeheightauto !importantmargin0pxoverflowhiddenpadding:2pxdisplay:blockoutlinenone !important;}
    .
    x-superboxselect ul {overflowhiddencursortext;}
    .
    x-superboxselect-display-btns {padding-right33px !important;}
    .
    x-superboxselect-btns {positionabsoluteright1pxtop0overflow:hiddenpadding:2px;}
    .
    x-superboxselect-btns div {floatleftwidth16pxheight16pxmargin-top4px;}
    .
    x-superboxselect-btn-clear {backgroundurl(clear.pngno-repeat scroll left 0px;}
    .
    x-superboxselect-btn-expand {backgroundurl(expand.pngno-repeat scroll left 0px;}
    .
    x-superboxselect-btn-over {background-positionleft -16px}
    .
    x-superboxselect-btn-hide {display:none;}
    .
    x-superboxselect li {floatleftmargin0px 1px 1px 1pxpadding0;line-height15px;}
    .
    x-superboxselect-stacked li {floatnone !important;}
    .
    x-superboxselect-input input bordernoneoutlinenonemargin-top1pxmargin-bottom1px;}
    body.ext-ie .x-superboxselect-input input {backgroundnonebordernonemargin-top3px;}
    .
    x-superboxselect-item {positionrelative; -moz-border-radius5px; -webkit-border-radius5pxborder-radius5pxo-border-radius5pxkhtml-border-radius6pxborder1px solid #d7d7d7; background-color: whitesmoke; padding: 0px 15px 1px 5px !important; }
    body.ext-ie7 .x-superboxselect-item {margin2px 1px 2px 1pxline-height1.2empadding2px 17px 4px 5px !important;}
    body.ext-ie6 .x-superboxselect-item {margin2px 1px 2px 1pxline-height1.2empadding2px 19px 4px 5px !important;}
    .
    x-superboxselect-item-hover {background#cdcdcd; border: 1px solid #949494;}
    .x-superboxselect-item-focus {border-color#8b8b8b; background: #8b8b8b; color: #fff;}
    .x-superboxselect-item-close {backgroundurl(close.pngno-repeat scroll left 0pxbordernonecursor: default; font-size1pxheight16px;padding:0positionabsoluteright0pxtop1pxwidth13px;display:block;cursor:pointer;}
    .
    x-superboxselect-item-close:hover, .x-superboxselect-item-close:active  background-positionleft -12px;}
    .
    x-superboxselect-item-focus .x-superboxselect-item-closebackground-positionleft -24px}
    .
    x-item-disabled .x-superboxselect-item-closebackground-positionleft -36px
    Many thanks for sharing this excellent component!

  6. #396
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    442
    Vote Rating
    3
    Jangla is on a distinguished road

      0  

    Default


    Just been taking a look at this control and there's one thing I'm struggling to get my head round: we'd like to implement it where hitting space adds a new item to the combo. Right now though, I can't even get any kind of add to work. The examples pages have buttons that add explicit items but how do we do it dynamically from user input?

  7. #397
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    442
    Vote Rating
    3
    Jangla is on a distinguished road

      0  

    Default


    Quote Originally Posted by Jangla View Post
    Just been taking a look at this control and there's one thing I'm struggling to get my head round: we'd like to implement it where hitting space adds a new item to the combo. Right now though, I can't even get any kind of add to work. The examples pages have buttons that add explicit items but how do we do it dynamically from user input?
    Apologies for bumping this, but the thread looked pretty active till I asked my question. Something I said?

  8. #398
    Sencha User
    Join Date
    Dec 2011
    Posts
    4
    Vote Rating
    0
    deepthi_r is on a distinguished road

      0  

    Default Version for 3.4

    Version for 3.4


    Hello,
    Can anyone help me find the latest version for SuperBoxSelect or the one that supports extjs 3.4 ,

    I tried the one in the first page of this thread but have issues related to :

    1) Content not being displayed if we come back to the SuperBoxSelect Drop down after we do a bulk delete on the selected items and then when the control moves to another popup/window.
    2) Issues with remote store (extjs js error when we delete any item)

    Thank you
    Deepthi

  9. #399
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    14
    Vote Rating
    1
    masood is on a distinguished road

      0  

    Default


    Im using 3.3.1 and have not had those issues. But I did have trouble if "remoteSort: true" was set in the JsonStore.

    I also had to make a modification to get the hover behavior right.
    PHP Code:
    enableElListeners : function() {
            
    this.el.on('click'this.onElClickthis, {stopEvent:true});

            
    //this.el.addClassOnOver('x-superboxselect-item x-superboxselect-item-hover');
            
    this.el.addClass('x-superboxselect-item');
            
    this.el.addClassOnOver('x-superboxselect-item-hover');        
        }, 
    Has anybody implemented paging with this control?

  10. #400
    Sencha User
    Join Date
    Apr 2008
    Posts
    141
    Vote Rating
    0
    armandoxxx is on a distinguished road

      0  

    Default Selection dropdown opened on form load.

    Selection dropdown opened on form load.


    Hey guys I need a little help with this component.

    Whenever I load form data and these components load it's stores (I've got 3 of them in the same form) dropdown selection opens up even though some other field is focused.
    Anybody else experiencing same thing ? Can this be solved with any property ?

    Regards

    Armando

Thread Participants: 119

  1. galdaka (9 Posts)
  2. aconran (1 Post)
  3. stever (4 Posts)
  4. dj (1 Post)
  5. mystix (18 Posts)
  6. MarkB (3 Posts)
  7. DrZog (1 Post)
  8. JorisA (2 Posts)
  9. jheid (3 Posts)
  10. Joe (1 Post)
  11. mschering (1 Post)
  12. gigel (1 Post)
  13. akannu (1 Post)
  14. phillipL (1 Post)
  15. badgerd (1 Post)
  16. cmendez21 (1 Post)
  17. mjlecomte (1 Post)
  18. grgur (1 Post)
  19. xantus (1 Post)
  20. garraS (3 Posts)
  21. vahid4134 (2 Posts)
  22. Lloyd K (2 Posts)
  23. boonkerz (3 Posts)
  24. crxtech (3 Posts)
  25. mishanian (7 Posts)
  26. fpw23 (1 Post)
  27. sanjshah (6 Posts)
  28. Zolcsi (1 Post)
  29. SharePat (1 Post)
  30. mjhaston (1 Post)
  31. radtad (16 Posts)
  32. Joyfulbob (2 Posts)
  33. kveeiv (1 Post)
  34. armandoxxx (2 Posts)
  35. imran (1 Post)
  36. Eric24 (1 Post)
  37. drunknmunky (1 Post)
  38. raphac (1 Post)
  39. charleshimmer (1 Post)
  40. frankthetank (4 Posts)
  41. qooleot (3 Posts)
  42. gianpaulo (1 Post)
  43. dennispg (9 Posts)
  44. dasnk (1 Post)
  45. grahamda (1 Post)
  46. sdavids (1 Post)
  47. jasonb885 (1 Post)
  48. wemerson.januario (1 Post)
  49. dizor (3 Posts)
  50. Stju (5 Posts)
  51. extjs_new (1 Post)
  52. senacle (1 Post)
  53. elderotaku (2 Posts)
  54. Dumas (1 Post)
  55. grzegorz.borkowski (13 Posts)
  56. bueth (1 Post)
  57. nonyus (2 Posts)
  58. travisbell (2 Posts)
  59. Jangla (2 Posts)
  60. woooop (2 Posts)
  61. MH61 (2 Posts)
  62. TDub (1 Post)
  63. antoniode (5 Posts)
  64. xiongzhijian51 (1 Post)
  65. l0ga4 (1 Post)
  66. nohurge (2 Posts)
  67. MarkBOneSmart (1 Post)
  68. The Transporter (2 Posts)
  69. swarnendude (1 Post)
  70. arconen (2 Posts)
  71. mratzloff (9 Posts)
  72. Tom23 (1 Post)
  73. nadim (15 Posts)
  74. hongtj (2 Posts)
  75. max.hauser (2 Posts)
  76. dcw (1 Post)
  77. pilotsnipes (2 Posts)
  78. matthewcrist (2 Posts)
  79. fargs (1 Post)
  80. dvuja2 (2 Posts)
  81. sudhirhv (1 Post)
  82. lanhun (2 Posts)
  83. galoch (1 Post)
  84. frrogoy (1 Post)
  85. tboswell (1 Post)
  86. ozum (5 Posts)
  87. scusyxx (1 Post)
  88. hoca (1 Post)
  89. jayasreepc (1 Post)
  90. Jensen (1 Post)
  91. icarey (5 Posts)
  92. mohan_b (1 Post)
  93. skbach_pointyhat (1 Post)
  94. timbonicus (3 Posts)
  95. rachid.abdessamad (1 Post)
  96. ajitmogra (1 Post)
  97. Korbin (1 Post)
  98. istetska (3 Posts)
  99. ian.young (1 Post)
  100. muncher (2 Posts)
  101. sebterzi (2 Posts)
  102. forestclown (1 Post)
  103. Akey (1 Post)
  104. pret (1 Post)
  105. OpnSrce (1 Post)
  106. sriramkumarp (1 Post)
  107. extjs-dev (4 Posts)
  108. mvoss (1 Post)
  109. thomaskee007 (1 Post)
  110. rajshinny (1 Post)
  111. masood (1 Post)
  112. sebholl (1 Post)
  113. forestkwan (1 Post)
  114. deepthi_r (1 Post)
  115. panshr (1 Post)
  116. brian.moeskau (1 Post)
  117. ldashevskiy (1 Post)
  118. lbilde (1 Post)
  119. aoyii (1 Post)

Tags for this Thread