ExtJS 4 - 如何显示宽度大于组合框宽度的模板？ [英] ExtJS 4 - How to display template having width greater than the width of combo-box?

问题描述

组合框，其中值显示在模板中。

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

但是当我这样做时，在值列表中没有滚动条显示，因为用户只能看到前两个值。一旦删除了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>船只代码：{vslCd}< / td>< / tr>< tr>< td height =2> ;< / td>< / td>< / td>< / td>< / td>船舶名称：{vslNm} 5>< / td>< / tr>< / table>'; 
} 
} 
  

任何人都可以建议，这和如何解决这个？附件是与问题相关的屏幕截图。

我使用的是ExtJS4和IE9。

解决方案

这似乎是Ext 4.0.2a中的错误。当matchFieldWidth设置为false时，下拉列表的大小不会有任何变化。

请参阅Picker.js＃alignPicker：

if（me.matchFieldWidth）{
//自动的高度（它将受到最小和最大宽度的约束），除非没有记录显示。
picker.setSize（me.bodyEl.getWidth（），
picker.store&&& picker.store.getCount（）？null：0）;
}
//注意：在此方法中没有setSize的其他出现


如果'matchFieldWidth'为false，则从不调用 picker.setSize ，并且从不占用选取器（=下拉列表）。

可能的解决方法是在任何情况下调用 setSize ，如果 matchFieldWidth = true 。

  picker.setSize（me.matchFieldWidth？me.bodyEl.getWidth （）：null，
 picker.store&&& picker.store.getCount（）？null：0）; 
  

注意： setSize（）配置maxWidth。

可能最好在不修改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）; 
} 
}）
}）; 
  

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

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