1. #1
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
    ritesh.kapse is on a distinguished road

      0  

    Thumbs up [Solved]Combobox inner list not aligning list items propertly ?

    [Solved]Combobox inner list not aligning list items propertly ?


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

    to
    HTML Code:
    <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 ?
    Attached Images
    Last edited by ritesh.kapse; 12 Dec 2008 at 2:08 AM. Reason: allignment and screen shot attached...

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Are you're using a state manager?

    Try this override.

  4. #4
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
    ritesh.kapse is on a distinguished road

      0  

    Default


    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]

    Code:
    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

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  6. #6
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
    ritesh.kapse is on a distinguished road

      0  

    Post not sure

    not sure


    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

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

  8. #8
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
    ritesh.kapse is on a distinguished road

      0  

    Smile Thanks :)

    Thanks :)


    Thanks Brian

  9. #9
    Sencha User kapil gupta's Avatar
    Join Date
    Aug 2010
    Location
    Delhi INDIA
    Posts
    13
    Vote Rating
    0
    kapil gupta is on a distinguished road

      0  

    Default


    Quote Originally Posted by brian.moeskau View Post
    the link provide by brian is not working.

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.