如何在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元素嗎？如果是這樣，它是如何完成的？

來源

2011-02-28 Edward Tanguay

你可能會更好過放置網格的工具欄在你的組合。工具欄擴展了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'} 
       ] 
      }) 
     } 
    ] 
}),

來源

2011-02-28 17:51:26 Alex

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

來源

2011-02-28 17:38:53 NT3RP

您可以使用頭配置來達到此目的。

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

來源

2014-11-10 17:20:30 MacGyver

如何在ExtJS面板的標題中放置下拉菜單？

回答

相關問題