Ha a ComboBox elemei között az egyiknek a displayField mezője üres, akkor a legördülő listában az adott elem csupán néhány pixel magas lesz.
renderTo: Ext.getBody(),
displayField: 'display',
valueField: 'value',
store: new Ext.data.SimpleStore({
fields: ['display', 'value'],
data: [['', '0'], ['hello', '1']]
}),
typeAhead: true,
mode: 'local',
triggerAction: 'all'
});
Triviális megoldás lehet, hogy nem csinálunk ilyet :), mondjuk úgy, hogy az üres string helyett   -t használunk. (olyan szóköz, ami nem választható el) Editálható ComboBox esetén nem lesz jó, mivel kiválasztásakor megjelenik az input mezőben is a szóköz.
Másik megoldás lehetne, hogy css-ben beállítjuk a minimum magasságot. (azt leszámítva, hogy az IE nem ismeri a minimum magasságot, illetve nem tudhatjuk, hogy pontosan mekkora is az a minimum magasság, tehát ezeket leszámítva teljesen jó megoldás)
Végül megoldható úgy, hogy a lenyiló lista template-jét átszerkesztjük.
Az interpreter nyelvek (a kód értelmezése dinamikusan, azaz futás és fordítás egy időben történik) egyik előnye, hogy aránylag könnyű bennük template rendszereket írni. A futatni kívánt programkódot először átalakítjuk az adott nyelvre, majd azt futtatjuk.
Természetesen az ExtJS-ből sem maradhattak ki a temaplate-ek. :) Már az ExtJS első verziójában is létezett erre megoldás, majd az ExtJS 2-ben kiegészítve, sokkal kényelmesebb formában jelent meg az Ext.XTemplate osztály.
Visszatérve az eredeti problémára, adjunk egy alapértelmezett értéket a megjelenítéshez: {display:defaultValue(" ")}. Ha Smarty-ban lennénk, akkor mindez így nézne ki: {$display|default:" "} (az utolsó mondat valójában lényegtelen, csak azért került ide, mert - gondolom - ezt a szintaktikát sokan jobban ismerik:)
renderTo: Ext.getBody(),
displayField: 'display',
valueField: 'value',
store: new Ext.data.SimpleStore({
fields: ['display', 'value'],
data: [['', '0'], ['hello', '1']]
}),
typeAhead: true,
mode: 'local',
triggerAction: 'all',
tpl: ['<tpl for=".">',
'<div class="x-combo-list-item">{display:defaultValue(" ")}</div>',
'</tpl>'].join('')
});
