View Full Version : [4.0.6] ComboBox matchFieldWidth false does not calculate picker height

19 Oct 2011, 1:18 PM
It looks like when a combo box has matchFieldWidth set to false, the picker height is not calculated so data in the picker is cut off. I saw a few older posts from other people running into this same issue, but I did not find a bug fix request. I just ran into this issue using Ext 4.0.6.



Ext version tested:

Ext 4.0.6
Browser versions tested against:

Chrome 14,16
DOCTYPE tested against:


When creating a combo box with matchFieldWidth set to false, the height of the picker is not calculated.
Steps to reproduce the problem:

Run the test case below and type grid into the field.
The result that was expected:

Picker size shows all data just like in the original example.
The result that occurs instead:

Picker height is not calculated so data is cut off.
Test Case:

I took the example from http://dev.sencha.com/deploy/ext-4.0.2a/examples/form/forum-search.html and added 2 lines of code. Full code is below:

<!DOCTYPE html><html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/bootstrap.js"></script>
<script type="text/javascript">

Ext.define("Post", {
extend: 'Ext.data.Model',
proxy: {
type: 'jsonp',
url : 'http://www.sencha.com/forum/topics-remote.php',
reader: {
type: 'json',
root: 'topics',
totalProperty: 'totalCount'

fields: [
{name: 'id', mapping: 'post_id'},
{name: 'title', mapping: 'topic_title'},
{name: 'topicId', mapping: 'topic_id'},
{name: 'author', mapping: 'author'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'excerpt', mapping: 'post_text'}

ds = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'Post'

panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search the Ext Forums',
width: 600,
bodyPadding: 10,
layout: 'anchor',

items: [{
xtype: 'combo',
store: ds,
displayField: 'title',
typeAhead: false,
hideLabel: true,
anchor: '100%',

listConfig: {
loadingText: 'Searching...',
width: 700, //changed width to be longer than the combo box
emptyText: 'No matching posts found.',

// Custom rendering template for each item
getInnerTpl: function() {
return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' +
'<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
'{excerpt}' +
pageSize: 10,
matchFieldWidth: false //added this configuration property
}, {
xtype: 'component',
style: 'margin-top:10px',
html: 'Live search requires a minimum of 4 characters.'


Possible fix:

The override below fixed the issue for me:

Ext.override(Ext.form.field.Picker, {
alignPicker: function() {
var me = this,

if (me.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
// Auto the height (it will be constrained by min and max width) unless there are no records to display.
picker.setSize(me.bodyEl.getWidth(), picker.store && picker.store.getCount() ? null : 0);
} else { //this else block added
picker.setSize(me.listConfig.width, picker.store && picker.store.getCount() ? null : 0);
if (picker.isFloating()) {

Operating System:

Windows XP

4 Nov 2011, 8:45 AM
I am still able to replicate this bug using Ext 4.0.7 and Firefox 7.0.1