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 - 如何顯示寬度大於組合框寬度的模板？

回答

相關問題