1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    206
    Vote Rating
    0
    randomuser01 is on a distinguished road

      0  

    Default XTemplate combo: Tab and css behavior

    XTemplate combo: Tab and css behavior


    I'm using a combo bound to a XTemplate which fills the data after querying teh server as the user is typing in chars.

    The problems

    a) In IE6, the 1st row css is not correct. In FF, once the list populates, the 1st row is auto selected and displays the correct css. In IE6, this doesn't happen. If I use down arrows to select other rows, the css is applied correctly. But if I use Up arrow to come back to the 1st row, the css is wrong again.

    b) With the 1st (or other rows) selected, in FF, if I hit Tab, the combo correctly selects the row as the value. But in IE6, this doesn't happen. Blur occurs and the field is set to blank.

    I'm unable to spot the causes in this code. Any hints would be appreciated.

    Thanks

    The CSS
    Code:
    .x-combo-list {
        background-color: #ffffff;
    }
    
    .x-combo-list .x-combo-selected 
    {
        background-color: #000000 ! important;
        color: #2877bb ! important;
        border: 1px dotted #a4b5cb ! important;
    }
    
    .x-combo-list-item {
        color: #000000;
    }
    Code:
        // to fix a bug in Ext where if a combo's TriggerField is hidden,
        // the combo will not render in IE
        Ext.form.TriggerField.override({
            afterRender: function() {
                Ext.form.TriggerField.superclass.afterRender.call(this);
                var y;
                if (Ext.isIE && !this.hideTrigger && this.el.getY() != (y = this.trigger.getY())) {
                    this.el.position();
                    this.el.setY(y);
                }
            }
        });
    
        // workaround to get keyUp working for combo boxes
        Ext.override(Ext.form.ComboBox, {
            initEvents : function(){
                Ext.form.ComboBox.superclass.initEvents.call(this);
                this.keyNav = new Ext.KeyNav(this.el, {
                    "up" : function(e){
                        this.inKeyMode = true;
                        this.selectPrev();
                    },
                    "down" : function(e){
                        if(!this.isExpanded()){
                            this.onTriggerClick();
                        }else{
                            this.inKeyMode = true;
                            this.selectNext();
                        }
                    },
                    "enter" : function(e){
                        this.onViewClick();
                        this.delayedCheck = true;
                        this.unsetDelayCheck.defer(10, this);
                    },
                    "esc" : function(e){
                        this.collapse();
                    },
                    "tab" : function(e){
                        this.onViewClick(false);
                        return true;
                    },
                    "pageDown": function(e) {
                        if( !this.rowHeight ) {
                            return;
                        }
                        var index = Math.min(this.selectedIndex + this.rowsPerPage, this.store.getCount() - 1);
                        this.select(index);
                    },
                    "pageUp": function(e) {
                        if( !this.rowHeight ) {
                            return;
                        }
                        var index = Math.max(this.selectedIndex - this.rowsPerPage, 0); 
                        this.select(index);
                    },
                    "home": function(e) {
                        this.select(0);
                    },
                    "end": function(e) {
                        this.select(this.store.getCount() - 1);
                    },
                    scope : this,
                    doRelay : function(foo, bar, hname){
                        if(hname == 'down' || this.scope.isExpanded()){
                           return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
                        }
                        return true;
                    },
                    forceKeyDown : true
                });
                this.queryDelay = Math.max(this.queryDelay || 10,
                        this.mode == 'local' ? 10 : 250);
                this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
                if(this.typeAhead){
                    this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
                }
                if((this.editable !== false) && !this.enableKeyEvents) {
                    this.el.on("keyup", this.onKeyUp, this);
                }
                if(this.forceSelection){
                    this.on('blur', this.doForce, this);
                }
            },
            calcRowsPerPage: function() {
                if (this.store.getCount()) {
                    if (!this.rowHeight)
                        this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
                    this.rowsPerPage = Math.floor(this.maxHeight / this.rowHeight);
                } else {
                    this.rowHeight = false;
                }
            },
            onKeyUp : function(e){
                if(this.editable !== false && !e.isSpecialKey()){
                    this.lastKey = e.getKey();
                    //this.dqTask.delay(this.queryDelay);
                    // overriding the previous line so that the 1st query
                    // gets issued after 1 ms and subsequent queries get issued at the 
                    // normal config value
                    this.dqTask.delay(this.lastQuery != undefined ? this.queryDelay : 1);
                }
                Ext.form.ComboBox.superclass.onKeyUp.call(this, e);
            }
        });
    
        var lastSelection = null;
        
        // as long as the 1st n chars of the query
        // matches the 1st n chars of the 1st item in the list,
        // cancel the query    
        function handleBeforeQuery(qe) {
            if (qe.isDeleted) {
                qe.combo.store.removeAll();
                return true;
            }
            
            // try to match 1st n chars
            var firstRec = qe.combo.store.getAt(0);
            if (firstRec) {
                var test = firstRec.get('Contract').substring(qe.query.length, 0);
                if (test.toUpperCase() == qe.query.toUpperCase() && qe.combo.isExpanded()) {
                    // override Ext's lastQuery check 
                    // so when a backspace is hit,
                    // a new AJAX call will be issued
                    qe.combo.lastQuery = test;
                    return false;
                }
            }
        }
        
        function handleKeyUp(field, e) {
            if (e.isSpecialKey())
                return;
            var rawVal = field.getRawValue();
            var doRequery = false;
            var key = e.getCharCode();
            var isDeleted = false;
            
            // if combo is not expanded, and the user
            // is typing in chars which are already in store,
            // we need to expand the list somehow
            if (rawVal && rawVal.length != 0) {
                // if DELETE or BACKSPACE has been used, force a reload
                if (key == e.BACKSPACE || key == e.DELETE) {
                    doRequery = true;
                    isDeleted = true;
                }
                else if (field.isExpanded() == false) {
                    var firstRec = field.store.getAt(0); 
                    if (!firstRec) {
                        // no records present, force load
                        doRequery = true;
                    }
                    else {
                        var test = firstRec.get('Contract').substring(rawVal.length, 0);
                        if (test.toUpperCase() == rawVal.toUpperCase()) {
                            // for some reason, expand doesn't work
                            // so force all records from store to be remoded
                            // and a new query to be issued
                            doRequery = true;
                        }
                    }
                }
            }
            
            // if the list is collapsed because of loss of focus, expand it
            if (field.isExpanded() == false && field.store.getTotalCount() != 0) {
                field.keyNav.down.call(field);
            }
            
            if (field.isExpanded() == false) {
                field.expand();
            }
            
            // if number of chars is less than minChars, 
            // collapse the list if it's expanded
            if (rawVal.length < field.minChars && field.isExpanded()) {
                field.collapse();
            }
            
            if (doRequery && rawVal.length >= field.minChars) {
                var qe = {
                    forceReload: true,
                    query: rawVal,
                    combo: field,
                    cancel: false,
                    isDeleted: isDeleted
                };
                field.fireEvent('beforequery', qe);
                // force a collapse and expand to requery
                field.collapse();
                field.expand();
            }
        }
        
        function handleBlur(combo) {
            // if the list is still visible after the
            // combo looses focus, force it to be hidden
            if (combo.isExpanded())
                combo.collapse();
        }
    
        comboRet = new Ext.form.ComboBox(
            {
                name: id,
                id: id,
                fieldLabel: fieldLabel,
                tabIndex: 1,
                store: contractSearchDS,
                displayField: 'Contract',
                minChars: 2,
                forceSelection: true,
                typeAhead: false,
                hideTrigger: true,
                enableKeyEvents: true,
                queryDelay: '5',
                listWidth:450,
                maxHeight: 288,   // single row Height is 18px so this is in multiples of 18 to prevent 
                                  // odd pgUp/pgDn behavior towards start and end of the list 
                tpl: contractTmpl,
                itemSelector: 'div.ux-search-item',
                listeners: {
                    beforequery: handleBeforeQuery,
                    keyup: handleKeyUp,
                    blur: handleBlur
                }
            });

  2. #2
    Ext User
    Join Date
    Sep 2008
    Posts
    206
    Vote Rating
    0
    randomuser01 is on a distinguished road

      0  

    Default


    It seems the following code fixes the Tab and Select problem for IE 6. But I still don't understand why the CSS on the 1st row is incorrect. Any hints on how to force the selected css on the 1st row in IE?

    Thanks

    Code:
        // to fix tab key behavior in IE
        function handleKeyDown(field, e) {
            if (Ext.isIE && e.getCharCode() == e.TAB) {
                var selIdx = field.selectedIndex;
                if (selIdx > -1) {
                    var rec = field.store.getAt(selIdx);
                    field.setValue(rec.get('Contract'));
                    // apparently, the event doesn't fire for 
                    // the very 1st row.
                    if (selIdx == 0)
                        field.fireEvent('select', field, rec, selIdx);
                }
            }
        };

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar