¿Cómo puedo poner un menú desplegable en el encabezado de un panel ExtJS?

Question

puedo poner los elementos HTML como texto e imágenes en una cabecera del panel como esto:

var grid = new Ext.grid.GridPanel({ 
    region: 'center', 
    style: 'margin: 10px', 
    store: new Ext.data.Store({ 
     data: myData, 
     reader: myReader 
    }), 
    headerCfg: { 
     tag: 'div', 
     cls: 'x-panel-header', 
     children: [ 
      { tag: 'div', cls: 'panel_header_main', 'html': 'Shopping Cart' }, 
      { tag: 'div', cls: 'panel_header_icon1', 'html': '<img src="images/icon_plus.png" />' }, 
      { tag: 'div', cls: 'panel_header_icon2', 'html': '<img src="images/icon_pencil.png" />' }, 
      { tag: 'div', cls: 'panel_header_extra', 'html': 'Order Number: 2837428347' } 
     ] 
    }, 

la que se ve bien:

pero cuando agrego elemento desplegable que no es la versión HTML de esta manera:

var grid = new Ext.grid.GridPanel({ 
    region: 'center', 
    style: 'margin: 10px', 
    store: new Ext.data.Store({ 
     data: myData, 
     reader: myReader 
    }), 
    headerCfg: { 
     tag: 'div', 
     cls: 'x-panel-header', 
     children: [ 
      { tag: 'div', cls: 'panel_header_main', 'html': 'Shopping Cart' }, 
      { tag: 'div', cls: 'panel_header_icon1', 'html': '<img src="images/icon_plus.png" />' }, 
      { tag: 'div', cls: 'panel_header_icon2', 'html': '<img src="images/icon_pencil.png" />' }, 
      { tag: 'div', cls: 'panel_header_extra', 'html': 'Order Number: 2837428347' }, 
      { 
       width:   100, 
       xtype:   'combo', 
       mode:   'local', 
       value:   'en', 
       triggerAction: 'all', 
       forceSelection: true, 
       editable:  false, 
       fieldLabel:  'Produkt', 
       name:   'language', 
       hiddenName:  'language', 
       displayField: 'name', 
       valueField:  'value', 
       store:   new Ext.data.JsonStore({ 
        fields : ['name', 'value'], 
        data : [ 
         {name : 'German', value: 'de'}, 
         {name : 'English', value: 'en'}, 
         {name : 'French', value: 'fr'} 
        ] 
       }) 
      } 
     ] 
    }, 

en que establece la secuencia de comandos en el encabezado:

¿Es posible colocar un elemento que no sea HTML dentro del encabezado de un panel? Si es así, ¿Cómo se hace?

Answer 1

Usted es probablemente mejor de la colocación de su combinado en la barra de herramientas de la red. Las barras de herramientas extienden Ext.Container y, por lo tanto, son mucho más adecuadas para contener otros componentes Ext. Intente lo siguiente:

var grid = new Ext.grid.GridPanel({ 
region: 'center', 
style: 'margin: 10px', 
store: new Ext.data.Store({ 
    data: myData, 
    reader: myReader 
}), 
tbar: new Ext.Toolbar({ 
    ctCls: 'panel-header', 
    items: [ 
     { xtype: 'tbfill' }, 
     { tag: 'div', cls: 'panel_header_main', 'html': 'Shopping Cart' }, 
     { tag: 'div', cls: 'panel_header_icon1', 'html': '<img src="images/icon_plus.png" />' }, 
     { tag: 'div', cls: 'panel_header_icon2', 'html': '<img src="images/icon_pencil.png" />' }, 
     { tag: 'div', cls: 'panel_header_extra', 'html': 'Order Number: 2837428347' }, 
     { 
      width:   100, 
      xtype:   'combo', 
      mode:   'local', 
      value:   'en', 
      triggerAction: 'all', 
      forceSelection: true, 
      editable:  false, 
      fieldLabel:  'Produkt', 
      name:   'language', 
      hiddenName:  'language', 
      displayField: 'name', 
      valueField:  'value', 
      store:   new Ext.data.JsonStore({ 
       fields : ['name', 'value'], 
       data : [ 
        {name : 'German', value: 'de'}, 
        {name : 'English', value: 'en'}, 
        {name : 'French', value: 'fr'} 
       ] 
      }) 
     } 
    ] 
}), 

Answer 2

GridPanels tiene dos propiedades que pueden interesarle: tbar y bbar; arriba y abajo toolbars, respectivamente.

Las barras de herramientas le permiten agregar botones, elementos de menú, menús desplegables y otros componentes ExtJS junto con HTML normal. Hay un ejemplo de toolbar on the ExtJS examples page.

En general, el código de barra de herramientas sería muy similar a su código existente:

//instead of 'headerCfg:' 
tbar: { 
    xtype: 'toolbar', 
    cls: 'x-panel-header', 
    items: [ 
     //your items 
    ] 
} 

Answer 3

Puede usar la configuración del encabezado para este fin.

header: { 
     xtype: 'header', 
     titlePosition: 0, 
     defaults: { 
      padding: '0 0 0 0' 
     }, 
     items: [ 
      { 
       xtype: 'mycombo' // or use Ext.create('class') instead of lazy instantiation 
      }, { 
       xtype: 'button', 
       text: '<b>\u2199</b>' 
      } 
     ] 
    },