[英]ExtJS ComboBox dropdown width wider than input box width?
有什么方法可以将 ExtJS(版本 4)ComboBox 的下拉菜单的宽度设置为比实际输入框的宽度宽?
我有一个组合框,我想在 200px 左右,但我在结果下拉菜单上有分页,宽度甚至不够大,无法显示所有分页栏的控件。
这是我创建组合的代码:
var add_combo = Ext.create('Ext.form.field.ComboBox',
{
id : 'gbl_add_combo',
store : Ext.create('Ext.data.Store',
{
remoteFilter : true,
fields : ['gb_id', 'title'],
proxy :
{
type : 'ajax',
url : 'index.php/store/get_items',
reader :
{
type : 'json',
root : 'records',
totalProperty : 'total',
successProperty : 'success'
},
actionMethods :
{
read : 'POST',
create : 'POST',
update : 'POST',
destroy : 'POST'
}
}
}),
listConfig:
{
loadingText: 'Searching...',
emptyText: 'No results found'
},
queryMode : 'remote',
hideLabel : true,
displayField : 'title',
valueField : 'gb_id',
typeAhead : true,
hideTrigger : true,
emptyText : 'Start typing...',
selectOnFocus : true,
width : 225,
minChars : 3,
cls : 'header_combo',
pageSize : 15
});
这有两个部分。 首先,您需要在组合框配置中设置matchFieldWidth :false。 然后,您可以在listConfig部分中指定width属性以仅设置下拉列表的样式,同时在主配置中指定组合框本身的宽度。
这与以前的版本不同,只允许您指定listWidth属性。
我没有找到动态更改'matchFieldWidth'属性的方法。 所以我找到了另一个解决方
{
xtype: 'combobox',
fieldLabel: 'Short Options',
queryMode: 'local',
store: ['Yes', 'No', 'Maybe'],
matchFieldWidth: false,
listConfig: {
listeners: {
beforeshow: function(picker) {
picker.minWidth = picker.up('combobox').getSize().width;
}
}
}
}
来源: http : //www.sencha.com/forum/showthread.php?293120-Setting-BoundList-minWidth-to-the-width-of-a-parent-ComboBox-without-matchFieldWidth
在 ExtJS 7+ modern 中,如果你想控制组合框选择器的宽度,你需要使用beforepickercreate事件。
它不是很直观,但它确实有效。
xtype: 'combobox',
...
listeners: {
beforepickercreate: {
fn: function(cmp, newV) {
newV.listeners = {
beforeshow: function(cmp) {
cmp.setMinWidth(400);
cmp.setWidth(400);
}
}
return newV;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.