ExtJS 4 - How to display template having width greater than the width of combo-box?

I have a combo-box in which the values are being displayed in a template.

Now, I want the width of the template to be more than that of combo-box and hence I am using matchFieldWidth:false as mentioned at the link - ExtJS ComboBox dropdown width wider than input box width?

But when I do so, then in the list of values there is no scrollbar displayled due to which the user is able to see only the first two values. The complete list gets displayed as soon as matchFieldWidth:false is removed, but then the width of template is reduced to that of combo-box which is not what is wanted.

Below is my code:

xtype: 'combo',
id: 'testId',
name: 'testName',
displayField: 'vslCd',
valueField: 'vslCd',
fieldLabel: 'Vessel Code',
store: storeVesselCodeVar,
matchFieldWidth: false,
queryMode: 'remote',
listConfig: {
   开发者_StackOverflow中文版 loadingText: 'Loading...',
    width: 400,
    autoHeight:true,
    getInnerTpl: function () {
        return '<table><tr><td height="5"></td></tr><tr valign="top"><td>Vessel Code:{vslCd}</td></tr><tr><td height="2"></td></tr><tr valign="top"><td>Vessel Name:{vslNm}</td></tr><tr><td height="5"></td></tr></table>';
    }
}

Could anyone please suggest that what can be the reason behind this and how to resolve this? Attached is a screenshot related to the problem.

I am using this ExtJS4 and IE9.

This appears to be a bug in Ext 4.0.2a. When 'matchFieldWidth' is set to 'false', the dropdown list is not sized at all.

see Picker.js#alignPicker:

        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);
        }
        // note: there is no other occurence of setSize in this method

if 'matchFieldWidth' is false, picker.setSize is never called and the picker (= dropdown) is never seized.

A possible fix is to call setSize in any case, and just not apply a width if matchFieldWidth=true.

        picker.setSize(me.matchFieldWidth ? me.bodyEl.getWidth() : null, 
                        picker.store && picker.store.getCount() ? null : 0);

Note: setSize() will apply the configured maxWidth resp. maxHeight if the passed value is 'null'.

It's probably better to apply the patch without modifying the Ext source.

Ext.require('Ext.form.field.Picker', function() {
    var Picker = Ext.form.field.Picker;
    Picker.prototype.alignPicker = Ext.Function.createSequence(
               Picker.prototype.alignPicker, function(width, height) {
                    if(this.isExpanded && !this.matchFieldWidth) {
                        var picker = this.getPicker();
                        picker.setSize(null, picker.store && 
                              picker.store.getCount() ? null : 0);
                    }
    })
});

I have been able to resolve this issue by adding height to the template. Here is the final code:

xtype: 'combo',
id: 'testId',
name: 'testName',
displayField: 'vslCd',
valueField: 'vslCd',
fieldLabel: 'Vessel Code',
store: storeVesselCodeVar,
matchFieldWidth: false,
queryMode: 'remote',
listConfig: {
    loadingText: 'Loading...',
    width: 400,
    height:300,
    autoHeight:true,
    getInnerTpl: function () {
        return '<table><tr><td height="5"></td></tr><tr valign="top"><td>Vessel Code:{vslCd}</td></tr><tr><td height="2"></td></tr><tr valign="top"><td>Vessel Name:{vslNm}</td></tr><tr><td height="5"></td></tr></table>';
    }
}

Hope this helps someone.