es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Extjs6 Cómo manejar overflow para los elementos del encabezado del Panel.

15 Jul, 2023 Programación

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:
Imagen

Debería lucir así:
Imagen

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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ón overflowHandler al objeto header y establece su valor como 'scroller' o 'menu' dependiendo de tus preferencias.

    Ext.create('Ext.panel.Panel', {
  width: 200,
  height: 50,
  collapsible: true,
  renderTo: Ext.getBody(),
  title: 'title',
  layout: 'hbox',
  header: {
    title: {
      text: 'title',
      flex: undefined
    },
    items: [{
        xtype: 'button',
        text: 'test',
        margin: '0 10'
      },
      {
        xtype: 'button',
        text: 'test',
        margin: '0 10'
      },
      {
        xtype: 'button',
        text: 'test',
        margin: '0 10'
      },
      {
        xtype: 'button',
        text: 'test',
        margin: '0 10'
      },
      {
        xtype: 'button',
        text: 'test',
        margin: '0 10'
      },
      {
        xtype: 'tbfill'
      }
    ],
    overflowHandler: 'scroller' //o 'menu'
  }
});

    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.

    scrollable-header-panel

Comments are closed.