ExtJS 4 - 如何显示宽度大于组合框宽度的模板？答案

【问题标题】：ExtJS 4 - How to display template having width greater than the width of combo-box?ExtJS 4 - 如何显示宽度大于组合框宽度的模板？
【发布时间】：2011-09-23 08:28:50
【问题描述】：

我有一个组合框，其中的值显示在模板中。

现在，我希望模板的宽度大于组合框的宽度，因此我使用链接中提到的 matchFieldWidth:false - ExtJS ComboBox dropdown width wider than input box width?

但是当我这样做时，在值列表中没有显示滚动条，因此用户只能看到前两个值。一旦 matchFieldWidth:false 被删除，完整的列表就会显示出来，但是模板的宽度会减小到组合框的宽度，这不是我们想要的。

下面是我的代码：

xtype: 'combo',
id: 'testId',
name: 'testName',
displayField: 'vslCd',
valueField: 'vslCd',
fieldLabel: 'Vessel Code',
store: storeVesselCodeVar,
matchFieldWidth: false,
queryMode: 'remote',
listConfig: {
    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>';
    }
}

谁能建议这背后的原因以及如何解决这个问题？附上与问题相关的截图。

我正在使用这个 ExtJS4 和 IE9。

【问题讨论】：

我已经能够通过向我的模板添加高度来解决这个问题。希望这对其他人有帮助。
您应该将此解决方案作为答案发布并接受，以帮助其他用户找到此问题的正确答案。

标签： templates extjs combobox extjs4 width

【解决方案1】：

这似乎是 Ext 4.0.2a 中的一个错误。当 'matchFieldWidth' 设置为 'false' 时，下拉列表根本没有大小。

请参阅 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

如果 'matchFieldWidth' 为 false，则永远不会调用 picker.setSize 并且永远不会占用选择器（= 下拉菜单）。

一种可能的解决方法是在任何情况下都调用setSize，如果matchFieldWidth=true 则不应用宽度。

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

注意：setSize() 将分别应用配置的 maxWidth。如果传递的值为“null”，则为 maxHeight。

最好在不修改 Ext 源的情况下应用补丁。

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);
                    }
    })
});

【讨论】：

感谢 Mistaecko 的回答，帮了大忙。

【解决方案2】：

我已经能够通过向模板添加高度来解决这个问题。这是最终代码：

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>';
    }
}

希望这对某人有所帮助。

【讨论】：