1. #1
    Sencha User
    Join Date
    May 2008
    Posts
    125
    Vote Rating
    1
    wiulma is on a distinguished road

      0  

    Default combobox blank option

    combobox blank option


    Hi!
    I have read some thread about Blank Text Item in Combo Box.
    I have an idea to resolve this problem, but I'm not able to realized it.
    I have a combo with a store.
    I'd like to add a config parameter ("blankOption").
    If this parameter is set to "true" I'd like to modify the array of data in the store, adding a blank record.
    So I tried to extend the combobox object in this way:

    Code:
    Ext.form.MyComboBox = Ext.extend(Ext.form.ComboBox, {
    
      
        initComponent : function(){
            Ext.form.EngComboBox.superclass.initComponent.call(this);
            if(this.transform){
                this.allowDomMove = false;
                var s = Ext.getDom(this.transform);
                if(!this.hiddenName){
                    this.hiddenName = s.name;
                }
                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];
                        var value = (Ext.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
                        if(o.selected) {
                            this.value = value;
                        }
                        d.push([value, o.text]);
                    }
                    this.store = new Ext.data.SimpleStore({
                        'id': 0,
                        fields: ['value', 'text'],
                        data : d
                    });
                    this.valueField = 'value';
                    this.displayField = 'text';
                }
                s.name = Ext.id();             
                if(!this.lazyRender){
                    this.target = true;
                    this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
                    Ext.removeNode(s);                 this.render(this.el.parentNode);
                }else{
                    Ext.removeNode(s);             
                }
            } else if(Ext.isArray(this.store)){
                
    			if (Ext.isArray(this.store[0])){											
    				this.store = new Ext.data.SimpleStore({
    				    fields: ['value','text'],
    				    data: this.store
    				});
    		        this.valueField = 'value';
    			}else{
    				this.store = new Ext.data.SimpleStore({
    				    fields: ['text'],
    				    data: this.store,
    				    expandData: true
    				});
    		        this.valueField = 'text';
    			}
    			this.displayField = 'text';
    			this.mode = 'local';
    		} 
    		if (this.initialConfig.blankOption) {
    	    var d = [];
    	    d.push ('1','2');
    	    this.store.data = d;			
        }
            this.selectedIndex = -1;
            if(this.mode == 'local'){
                if(this.initialConfig.queryDelay === undefined){
                    this.queryDelay = 10;
                }
                if(this.initialConfig.minChars === undefined){
                    this.minChars = 0;
                }
            }
        }
        
    });
    Ext.reg('mycombobox', Ext.form.MyComboBox);
    
    
      var combo = new Ext.form.ComboBox({
      	    id: 'searchField_'+pIndex,
      	    allowBlank: true,
            store: pDataStore,
            displayField: pVisField,
            valueField: pCodField,
            typeAhead: true,
            forceSelection: true,
            emptyText:'',
            fieldClass: 'inputField',
            triggerAction: 'all',
            selectOnFocus:true,
            mode: 'local',
            blankOption: true
    }
    In the red lines I have tried to modify the array of data.
    But I have some errors.
    The first: "this.initialConfig.blankOption" generate an error.
    If I bypass this error, I have another one:

    this.data.getRange is not a function
    getRange()(undefined, undefined)ext-all.js (riga 10794)
    refresh()()ext-all.js (riga 17705)
    setStore()(Object data=[2] baseParams=Object paramNames=Object, undefined)ext-all.js (riga 17810)
    bindStore()(Object data=[2] baseParams=Object paramNames=Object, true)ext-all.js (riga 27515)
    initList()()ext-all.js (riga 27478)
    createSingle()()ext-all.js (riga 1397)
    fire()()ext-all.js (riga 1488)
    fireEvent()()ext-all.js (riga 1184)
    onFocus()()ext-all.js (riga 26051)
    onFocus()()ext-all.js (riga 26720)
    onTriggerClick()()ext-all.js (riga 27957)
    h()()ext-all.js (riga 1694)
    getViewWidth()()ext-base.js (riga 10)
    [Break on this error] return this.data.getRange(start, end);

    Have you got an idea to resolve my error?
    Thanks!

  2. #2
    Sencha Premium Member neenhouse's Avatar
    Join Date
    Dec 2007
    Location
    Austin
    Posts
    168
    Vote Rating
    1
    neenhouse is on a distinguished road

      0  

    Default


    I see your *a* problem here:

    this.store.data = d;


    you are overridding a bunch of stuff that is stored in this.store.data, including the method "getRange". I think instead you need to do:

    this.store.data[0].data. = d;

    throw a debugger; right above that line and look inside that key to make sure where you need to place your data. Lemme know how it goes.
    I love ext.

  3. #3
    Sencha User
    Join Date
    May 2008
    Posts
    125
    Vote Rating
    1
    wiulma is on a distinguished road

      0  

    Default


    hi neenhouse!
    thanks!
    After many test I have modify my component and now it works!!
    Code:
    Ext.form.MyComboBox = Ext.extend(Ext.form.ComboBox, {
     
        initList : function(){
            if(!this.list){
                var cls = 'x-combo-list';
                this.list = new Ext.Layer({
                    shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
                });
     
                var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
                this.list.setWidth(lw);
                this.list.swallowEvent('mousewheel');
                this.assetHeight = 0;
     
                if(this.title){
                    this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
                    this.assetHeight += this.header.getHeight();
                }
     
                this.innerList = this.list.createChild({cls:cls+'-inner'});
                this.innerList.on('mouseover', this.onViewOver, this);
                this.innerList.on('mousemove', this.onViewMove, this);
                this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
     
                if(this.pageSize){
                    this.footer = this.list.createChild({cls:cls+'-ft'});
                    this.pageTb = new Ext.PagingToolbar({
                        store:this.store,
                        pageSize: this.pageSize,
                        renderTo:this.footer
                    });
                    this.assetHeight += this.footer.getHeight();
                }
     
                if(!this.tpl){
     
                    this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';
     
                }
     
     
                this.view = new Ext.DataView({
                    applyTo: this.innerList,
                    tpl: this.tpl,
                    singleSelect: true,
                    selectedClass: this.selectedClass,
                    itemSelector: this.itemSelector || '.' + cls + '-item'
                });
    if (this.initialConfig.blankOption) {
                     var rowRecord = Ext.data.Record.create(this.store.fields);       
            var arrFields = new Array();
            for (i=0,len=this.store.fields.items.length;i<len;i++) {
                if (this.store.fields.items[i].name==this.store.reader.meta.id) {
                  var pValue = " ";
                  arrFields [this.store.fields.items[i].name] = this.initialConfig.blankKey;
                } else {
                 arrFields [this.store.fields.items[i].name] = this.initialConfig.blankText;
                }
            }                               
            this.store.insert(0, new rowRecord(arrFields));
        }
                this.view.on('click', this.onViewClick, this);
     
                this.bindStore(this.store, true);
     
                if(this.resizable){
                    this.resizer = new Ext.Resizable(this.list,  {
                       pinned:true, handles:'se'
                    });
                    this.resizer.on('resize', function(r, w, h){
                        this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
                        this.listWidth = w;
                        this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
                        this.restrictHeight();
                    }, this);
                    this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
                }
            }
        }
     
    });

  4. #4
    Ext User
    Join Date
    Mar 2010
    Posts
    5
    Vote Rating
    0
    cwhitacre is on a distinguished road

      0  

    Default Ext 3.x Solution

    Ext 3.x Solution


    I solved this problem in Ext 3.x by:
    1. using '&nbsp;' as the display value for the blank entry
    2. setting valueNotFoundText to the empty string
    3. adding a listener to 'select'

    Here's the 'select' listener:

    Code:
    function(combo, record, index) 
    {
        if (record.data.display == '&nbsp;')
            combo.setValue('DUMMY'); // trigger valueNotFoundText
    }
    As you can see, it triggers setting the display value to valueNotFoundText--the empty string--when the display value is '&nbsp;'. ValueNotFoundText and the select event are both documented on ComboBox.


    P.S. I believe this is the "Blank Text Item" thread mentioned above:

Thread Participants: 2

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