PDA

View Full Version : ExtJS3 combobox height of drop down list - problem



softm
28 Mar 2013, 4:21 AM
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:


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.

softm
28 Mar 2013, 4:30 AM
$( ".tall-cb" ) . css( "color", "green" );
$( ".tall-cb" ) . css( "font-weight", "800" );


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

willigogs
28 Mar 2013, 5:57 AM
Use the maxHeight config on your combo:
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.ComboBox-cfg-maxHeight

softm
28 Mar 2013, 10:19 AM
Thanks, works.
One question, how i can add event on after show the drop down list... as i understood only changing sources of extjs?

willigogs
28 Mar 2013, 10:25 AM
Hook into the expand listener on the combo:
http://docs.sencha.com/ext-js/3-4/?mobile=/api/Ext.form.ComboBox#event-expand

softm
28 Mar 2013, 11:38 AM
Hook into the expand listener on the combo:
http://docs.sencha.com/ext-js/3-4/?mobile=/api/Ext.form.ComboBox#event-expand


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

willigogs
28 Mar 2013, 11:44 AM
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" :)

softm
28 Mar 2013, 12:13 PM
Thanks, your have right, - tpl option helps.