如何在ExtJS面板的标题中放置下拉菜单？

问题描述：

我可以把HTML元素，例如文本和图像在面板接头是这样的：如何在ExtJS面板的标题中放置下拉菜单？

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' } 
     ] 
    },

看起来细：

enter image description here

但是当我添加下拉元件是不普通的HTML像这样：

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'} 
        ] 
       }) 
      } 
     ] 
    },

它呈现脚本到页眉： enter image description here

甚至可以在面板的标题内放置非HTML元素吗？如果是这样，它是如何完成的？

答

你可能会更好过放置网格的工具栏在你的组合。工具栏扩展了Ext.Container，因此更适合于包含其他Ext组件。请尝试以下操作：

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'} 
       ] 
      }) 
     } 
    ] 
}),

答

GridPanels有两个您可能感兴趣的属性：tbar和bbar;顶部和底部toolbars，分别。

工具栏允许您添加按钮，菜单项，下拉列表和其他ExtJS组件以及常规HTML。有一个toolbar on the ExtJS examples page的例子。

一般来说，工具栏代码将是非常相似的现有代码：

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

答

您可以使用头配置来达到此目的。

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>' 
      } 
     ] 
    },

如何在ExtJS面板的标题中放置下拉菜单？

相关推荐