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

enter image description here ExtJS 4 - 如何显示宽度大于组合框宽度的模板？

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

现在，我想的模板的宽度比组合框的更多，因此我使用matchFieldWidth：假在链路中提到 - 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。

来源

2011-09-23 netemp

我已经能够通过向我的模板添加高度来解决此问题。希望这可以帮助别人。 – netemp

您应该将此解决方案作为答案发布并接受它，以帮助其他用户找到此问题的正确答案。 – suknic

当然，感谢分享。 – netemp

这似乎是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' 是假的，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); 
        } 
    }) 
});

来源

2011-09-23 09:43:18 mistaecko

感谢答案Mistaecko，帮助了很多。 – netemp

似乎在4.0.7中仍然存在Bug – Asken

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

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

希望这可以帮助别人。

来源

2011-09-23 09:11:50 netemp

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

回答

相关问题