Combobox inner list not aligning list items propertly ?

[ritesh.kapse]

Hi All,

I am facing a strange problem with Combo boxes.

I have got few comboboxex in a window... when i click on any combobox the list appears as usual most of the times.

But some time I cant see the list altogether. Please see the screenshots attached.

When I inspected in firebug i found extjs insering some unnecessery style to div with class x-combo-list-inner.

Normal behaving combo box:-

<div class="x-layer x-combo-list" id="ext-gen904"
    style="position: absolute; z-index: 11000; visibility: hidden; left: -10000px; top: -10000px; width: 128px; height: 100px;">
<div class="x-combo-list-inner" id="ext-gen906"
    style="overflow: auto; width: 128px; height: 100px;">
<div class="x-combo-list-item x-combo-selected">LPN/LVN</div>
<div class="x-combo-list-item">Other</div>
<div class="x-combo-list-item">Registered Nurse</div>
<div class="x-combo-list-item">Respiratory Therapist</div>
<div class="x-combo-list-item">Surgical Technologist</div>
</div>
</div>

Abnormal behaving combo box :-

<div class="x-layer x-combo-list" id="ext-gen904"
    style="position: absolute; z-index: 11000; visibility: hidden; left: -10000px; top: -10000px; width: 128px; height: 100px;">
<div class="x-combo-list-inner" id="ext-gen906"
    style="overflow: auto; width: 400px; left: 440px; top: 301px; height: 300px;">
<div class="x-combo-list-item x-combo-selected">LPN/LVN</div>
<div class="x-combo-list-item">Other</div>
<div class="x-combo-list-item">Registered Nurse</div>
<div class="x-combo-list-item">Respiratory Therapist</div>
<div class="x-combo-list-item">Surgical Technologist</div>
</div>
</div>

if I change the div: -

<div class="x-combo-list-inner" id="ext-gen906" style="overflow: auto; width: 400px; left: 440px; top: 301px; height: 300px;">

to

<div class="x-combo-list-inner" id="ext-gen906" style="overflow: auto; width: 128px;  height: 300px;">

I can see the inteded list.

How do I fix this ?

[jay@moduscreate.com]

1) What broswer/os?

2) WHere is your actual code?
3) why use anchors instead of better looking buttons? I know - this one is symantecs

[Condor]

Are you're using a state manager?

Try this override.

[ritesh.kapse]

It appears both on IE and Firefox.... but not always....

the code is a bit complex...

If you had noticed I can create dynamic pair of comboboxex using Add another specialty link( see the screen shot)...

so this is the function to do that....

newid:- dynamically generate id (doing manually)
proff:- default value for combo [any_id,0]
unit:- default value for combo [any_id,1]

function getProfessionSpecialtyPair(newid, proff, unit){
    return {
        border: false,
        xtype: 'panel',
        id: 'professionspecialty' + newid,
        border: false,
        autoHeight: true,
        layout: 'table',
        defaults: {
            bodyStyle: 'padding:10px;font-size:12px;'
        },
        items: [{
            xtype: 'combo',
            width: 130,
            listWidth:130,            
               ctCls:'srchtb-proffspec-ct',
            emptyText: 'Profession',
            hiddenId: 'professionId' + newid,
            hiddenName: 'professionId',
            mode: 'local',
            editable: false,
            triggerAction: 'all',
            displayField: 'profession',
            valueField: 'professionCode',
            value: proff,
            listeners: {
                select: getSpecialties
            },
            store: professionStore,
            id: 'profession' + newid,
            name: 'profession',
            cellCls: "checkbox-profession-specialty"
        }, {
            xtype: 'combo',
            shadow: false,
            width: 130,
            listWidth:130,            
               ctCls:'srchtb-proffspec-ct',
            hiddenId: 'specialtyId' + newid,
            hiddenName: 'specialtyId',
            emptyText: 'Speciality',
            msgTarget: 'title',
            mode: 'local',
            editable: false,
            triggerAction: 'all',
            forceSelection: true,
            displayField: 'specailty',
            valueField: 'specCode',
            value: unit,
            lastQuery: "",
            store: new Ext.data.Store({
                storeId: 'specialtystore' + newid,
                reader: new Ext.data.JsonReader({                    
                    fields: ['specCode', 'specailty']
                })
            }),
            id: 'specialty' + newid,
            name: 'specialty',
            cellCls: "checkbox-profession-specialty"
        },{
            border: false,
            autoHeight: true,
            autoWidth: true,
            cellCls: "checkbox-profession-specialty",
            html: (newid < 4) ? ('<a href="#" onClick="resetProfessionSpecialty(' + newid + ');">' + 'reset' + '</a>') : ('<a href="#" onClick=" deleteProfessionSpecialty(' + newid + '); ">' + 'delete' + '</a>')
        }]
    }
}

One more thing... I am loading the data for both these combo boxes on render of the window.

So the method getSpecialties fills the specialty in the corrosponding combo box.

It happens on both the comboxes i.e profession and specialty.

Thanks

[Condor]

Could you try if my override (see post above) works?

[ritesh.kapse]

Hi Condor,

I tried you override... Its seems to be working... but I am still not sure... As I said the behavior doesn't happen very often...

might have to reply this thread again...

Thanks all

[brian.moeskau]

https://extjs.com/forum/showthread.php?t=47431

[ritesh.kapse]

Thanks Brian

[kapil gupta]

https://extjs.com/forum/showthread.php?t=47431

the link provide by brian is not working.

[Condor]

The extjs.com SSL certificate has expired, so you need to remove the s from https.

Which will make you end up in the same thread I linked to earlier.