ExtJS 4 - 如何显示宽度大于组合框宽度的模板？ [英] 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.

现在，我想要模板的宽度大于组合框的宽度，因此我使用的链接中提到的matchFieldWidth：false - ExtJS ComboBox下拉宽度大于输入框宽度

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?

但是当我这样做，然后在值列表中没有滚动条显示，由于用户只能看到前两个值。一旦matchFieldWidth：false被删除，就会显示完整的列表，但是模板的宽度减少到不需要的组合框的宽度。

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.

以下是我的代码：

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

任何人都可以建议，背后的原因是什么这个和怎么解决这个？附件是与该问题相关的屏幕截图。

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.

我正在使用这个ExtJS4和IE9。

I am using this ExtJS4 and IE9.

推荐答案

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

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.

请参阅Picker.js＃alignPicker：

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'为false， picker.setSize 从未被调用，并且选择器（= dropdown）从未被占用。

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

可能的修复是在任何情况下调用 setSize ，如果 matchFieldWidth = true 。

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

注意： setSize（）将应用配置maxWidth maxHeight如果传递的值为null。

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

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

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

这篇关于ExtJS 4 - 如何显示宽度大于组合框宽度的模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！