javascript - examples - ¿El ancho desplegable del ComboBox ExtJS es más ancho que el ancho del cuadro de entrada?
extjs docs (2)
Hay dos partes en esto. En primer lugar, debe configurar matchFieldWidth : false en la configuración de su combobox. Luego, puede especificar los atributos de ancho en la sección listConfig para dar estilo al desplegable, mientras especifica el ancho del cuadro combinado en la configuración principal.
Esto varía de la versión anterior, que solo le permite especificar la propiedad listWidth.
¿Hay alguna manera de establecer el ancho del menú desplegable de ComboBox de ExtJS (versión 4) para que sea más ancho que el del cuadro de entrada real?
Tengo un comboxbox en el que quiero estar alrededor de 200px pero tengo una paginación en el menú desplegable de resultados y ese ancho ni siquiera es lo suficientemente grande para mostrar todos los controles de la barra de paginación.
Aquí está mi código para crear el combo:
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
});
No encontré la forma de cambiar la propiedad ''matchFieldWidth'' dinámicamente. Así que encontré otra solución:
{
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;
}
}
}
}