Extjs6 Cómo manejar overflow para los elementos del encabezado del Panel.
Quiero manejar el desbordamiento para los elementos de encabezado del panel. Cuando el número de botones excede el ancho de la pantalla, el ícono de colapso y los botones no son visibles.
Quiero hacer que el encabezado sea desplazable o mostrar los elementos desbordados en un menú desplegable.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 200,
height: 50,
collapsible: true,
renderTo: Ext.getBody(),
title: 'título',
layout : 'hbox',
header: {
title: {
text: 'título',
flex: undefined
},
items: [{
xtype: 'button',
text: 'prueba',
margin: '0 10'
},{
xtype: 'button',
text: 'prueba',
margin: '0 10'
},{
xtype: 'button',
text: 'prueba',
margin: '0 10'
},{
xtype: 'button',
text: 'prueba',
margin: '0 10'
},{
xtype: 'button',
text: 'prueba',
margin: '0 10'
},{
xtype: 'tbfill'
}]
}
});
});
}
});
Por favor refiérase a la siguiente imagen:
Debería lucir así:
davy.ai
Para manejar el desbordamiento de los elementos del encabezado del panel en ExtJS, puedes hacer que el encabezado sea desplazable o mostrar los elementos de desbordamiento en un menú desplegable. Para lograr esto, puedes añadir la configuración
overflowHandler
al encabezado del panel y establecerla como'scroller'
o'menu'
.En la configuración de
Ext.panel.Panel
, añade la configuraciónoverflowHandler
al objetoheader
y establece su valor como'scroller'
o'menu'
dependiendo de tus preferencias.En este ejemplo, he establecido
overflowHandler
como'scroller'
. Esto hará que los elementos del encabezado sean desplazables si exceden el ancho de la pantalla. Alternativamente, puedes establecerlo como'menu'
, lo cual mostrará los elementos de desbordamiento en un menú desplegable.