Threaded View

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    38
    Vote Rating
    0
    repata is on a distinguished road

      0  

    Default Combo inner-list is adding left and top to style attribute

    Combo inner-list is adding left and top to style attribute


    Hello,

    I've been having some issues with combo boxes where the list will be offset by varying amounts within the list's layer, meaning that the x-combo-list-inner div displays correctly, but the list items do not.

    It happens in IE and FF but is very inconsistent and depends on which combo you trigger first.

    What i have noticed when looking at the generated html... on lists that do not display correctly, the x-combo-list-inner div will have a left and top defined in their style attribute causing the list to offset. These styles are not present in properly displayed lists.

    The oddest part is that if I trigger a combo that never has this happen first, then the rest will work fine.

    Anyone else experience this? Why would the list sometimes get top and left attributes?

    Many thanks in advance.

    here is code for one of the problem combos

    Code:
    
    PolicyImport = function(cfg) {
        this.rapkey = 0;
        this.data = null;
        this.rapObj = null;
        Ext.apply(this, cfg);
    
        
        PolicyImport.superclass.constructor.call(this, {
            title: 'Export To DARTS'
                , border: true, modal: true
                , width: 400, height: 200, layout: 'fit'
                , items: [
                    {
                        xtype: 'form', id: 'win-pi'
                        , border: false, width: 384, height: 200, bodyStyle: 'padding:8px'
                        , defaults: { msgTarget: 'side' }
                        , items: [
                            { fieldLabel: 'File', id: 'pi-file', xtype: 'textfield', anchor: '-20', readOnly: true }
                            , { fieldLabel: 'Employer #', id: 'pi-en', xtype: 'numberfield', width: 80, allowBlank: false, emptyText: 'FiServ EIN' }
                            , { fieldLabel: 'Document Type', id: 'pi-dt', xtype: 'combo', allowBlank: false, forceSelection: true
                                , valueField: 'documenttypekey', displayField: 'codeandname', triggerAction: 'all', anchor: '-20', emptyText: '[Select Type]'
                                , store: new Ext.data.JsonStore({ url: '../Services/get_data.ashx?doctypes', baseParams: { func: 'doctypes' }, fields: [{ type: 'int', name: 'documenttypekey' }, 'codeandname'], root: 'd' })
                            }
                            , { fieldLabel: 'Comments', id: 'pi-cmt', xtype: 'textfield', anchor: '-20', allowBlank: false }
                        ]
                    }
                ]
                , buttons: [
                    { text: 'Export', listeners: { click: this.doExport, scope: this} }
                    , { text: 'Cancel', listeners: { click: function() { this.close(); }, scope: this} }
                ]
        });
    }
    
    Ext.extend(PolicyImport, Ext.Window, {
        inits: function() {
            if (this.data != null) {
                Ext.getCmp('pi-file').setValue(this.data.displayname);
                if (this.rapObj.insuredein > 0) {
                    Ext.getCmp('pi-en').setValue(this.rapObj.insuredein);
                }
            }
        }
        , doExport: function() {
    
        }
    
    });

    some resulting html:

    left and top are defined in the style attribute

    HTML Code:
    <div id="ext-gen673" class="x-layer x-combo-list" style="position: absolute; z-index: 11000; visibility: visible; left: 713px; top: 329px; width: 398px; height: 300px;">
    <div id="ext-gen675" class="x-combo-list-inner" style="overflow: auto; width: 450px; left: 340px; top: 253px; height: 300px;">
    <div class="x-combo-list-item">Arizona</div>
    <div class="x-combo-list-item x-combo-selected">Central Valley</div>
    <div class="x-combo-list-item">Colorado</div>

    proper html:

    HTML Code:
    <div id="ext-gen653" class="x-layer x-combo-list" style="position: absolute; z-index: 11000; visibility: hidden; left: -10000px; top: -10000px; width: 398px; height: 300px;">
    <div id="ext-gen655" class="x-combo-list-inner" style="overflow: auto; width: 398px; height: 300px;">
    <div class="x-combo-list-item">xxxx Axxxx</div>
    <div class="x-combo-list-item">xxxxx xxxxx</div>
    Attached Images