Agregar panel dinámicamente en el medio de una barra de título

Tengo un panel con una barra de título que ya tiene dos botones, uno a la izquierda y otro a la derecha de la barra. Ahora me gustaría saber cómo agregar un panel (o si no) al centro de la barra.

Este panel debe tener una imagen y una cuerda dentro.

Esto es lo que hago por el momento, pero el panel se muestra a la derecha del botón izquierdo y no sé cómo colocarlo en el medio de la barra de título.

this.getTitlebar().add([{
    xtype: 'panel',
    layout:'hbox',
    items:[{
      xtype:'img',
      width:32,
      height:32,
      src:data.image.small.url
    },{
      html: data.key,
      style:'color:#FFF'
    }]
}]);

[ACTUALIZAR]: centrado: verdadero

Traté de agregar centered: true a la configuración de mi panel pero no funcionó, en realidad empeoró

de esto

enter image description here

a este

enter image description here

Muchas Gracias

preguntado el 22 de mayo de 12 a las 11:05

4 Respuestas

no es necesario agregar el "espaciador"

items: [
    // your_first_button(default:left)
    {},
    // your_central_panel
    {centered: true},
    // your_second_button
    {right: 0}
]

Espero que esto ayude.

contestado el 26 de mayo de 13 a las 10:05

Para alinear sus artículos como se describe, simplemente use este prototipo:

items: [
  {your_first_button},
  {xtype: 'spacer'},
  {your_central_panel},
  {xtpye: 'spacer'},
  {your_second_button},
]

Espero que esto ayude.

contestado el 22 de mayo de 12 a las 13:05

Ya tengo mis dos botones cuando quiero agregar el panel. ¿Cómo puedo agregarlo dinámicamente en el centro? - Titouan de Bailleul

intenta agregar centered: true config a su panel, ¿funciona? - thiem nguyen

Si está tratando de lograr lo mismo, no use un Ext.Titlebar pero usa un Ext.Toolbar preferiblemente.

Cosas como {xtype:'spacer'} no funcionan en las barras de título...

contestado el 26 de mayo de 13 a las 11:05

Sí, si no especifica un título en su barra de título, solo debe usar una barra de herramientas. - FuzzyLikeSheep

¿Intentó insertar el método del componente?

Puedes tener algo como esto

yourComponent.insert(index,componentTobeAdded);

Y después de agregarlo, llame al diseño de componentes de la barra de herramientas para mostrar el panel agregado.

contestado el 22 de mayo de 12 a las 17:05

si, lo probé con índices del 0 al 4 pero no cambia nada. por cierto: escribiste add() en tu publicación. Y estoy usando ST2, por lo que ya no hay doComponentLayout(), creo que si es lo que quisiste decir: Titouan de Bailleul

Entonces, ¿quiere decir que puede agregar el panel entre dos botones izquierdo y derecho pero no está centrado? - Akash Saikia

Puedo decir que puedes tener algo como esto, no sé si esto puede ser una solución o un parche. En lugar de tener ese panel directamente en la posición, agregue un Contenedor con un estilo de 100% y -webkit-box-align:center, -webkit-box-pack-center Y agregue el panel principal que quería centrado a este contenedor que acaba de creado. Ahora agregue el primer contenedor que creamos con estilo a la barra de herramientas. - Akash Saikia

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.