Results 1 to 1 of 1

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

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2008
    Vote Rating

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


    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

    PolicyImport = function(cfg) {
        this.rapkey = 0; = null;
        this.rapObj = null;
        Ext.apply(this, cfg);
       , {
            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{ 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 ( != null) {
                if (this.rapObj.insuredein > 0) {
        , 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 Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts