Results 1 to 8 of 8

Thread: ExtJS3 combobox height of drop down list - problem

  1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    47

    Default ExtJS3 combobox height of drop down list - problem

    Am trying change height of expanded combobox.
    ext 3.0.0.

    i made this in config:

    listClass: "tall-cb",

    and i made an try to catch it expand:

    Code:
                         listeners:
                         {
                          expand:
                          {
                            fn:function(combo) 
                            {
                              $.log( "render", combo, $( ".tall-cb" ) . css( "height" ) );
                              //$( ".tall-cb" ) . prev() . css( "height", "402px" );
                              $( ".tall-cb" ) . css( "height", "400px" );
                              $( ".tall-cb" ) . next() . css( "height", "400px" );
                              $.log( "render", combo, $( ".tall-cb" ) . css( "height" ) );
                            }
                          },
    In css was not changed, seems this event EXPAND is fired before expanding part generated.

    I made try to add this in css, to change css, but inline height 300px is generated by ext overwrite this all (!!!!)

    This is HTML of extended part:

    <div class="x-layer x-combo-list tall-cb" id="ext-gen156" style="position: absolute; z-index: 12007; visibility: visible; left: 370px; top: 171px; width: 118px; height: 300px; font-size: 11px; display: block;">

    <div class="x-combo-list-inner" id="ext-gen157" style="width: 118px; height: 300px;">

    <div class="x-combo-list-item">Any</div>
    <div class="x-combo-list-item">Next items... </div>

    Please help me change this (300px) height of combobox drop down list.

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    47

    Default

    $( ".tall-cb" ) . css( "color", "green" );
    $( ".tall-cb" ) . css( "font-weight", "800" );


    this even works. but height is owerwriten, as i see after show.

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    Use the maxHeight config on your combo:
    http://docs.sencha.com/ext-js/3-4/#!...-cfg-maxHeight

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    47

    Default

    Thanks, works.
    One question, how i can add event on after show the drop down list... as i understood only changing sources of extjs?

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    Hook into the expand listener on the combo:
    http://docs.sencha.com/ext-js/3-4/?m...x#event-expand

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    47

    Default

    Quote Originally Posted by willigogs View Post
    Hook into the expand listener on the combo:
    http://docs.sencha.com/ext-js/3-4/?m...x#event-expand

    Expand fires before css height is added, but after html is generated ... want just event, which will fire after all css changes ...

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    Sorry, I'm not sure I'm understanding what you're trying to achieve?

    Adding CSS inline isn't a good approach to take - instead give your combo an ID or class, and then write your css based on this in your stylesheet. Alternatively, if you're trying to alter the html code of each combo dropdown option, try looking into the combo "tpl" config, as this allows you to configure the HTML used to create the "options"

  8. #8
    Sencha User
    Join Date
    Jan 2011
    Posts
    47

    Default

    Thanks, your have right, - tpl option helps.

Posting Permissions

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