Javascript 如何在ExtJS面板的标题中放置下拉列表？

我可以将文本和图像等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' }
        ]
    },

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

var grid=new Ext.grid.GridPanel({
地区：'中心'，
样式：“边距：10px”，
存储：新的Ext.data.store({
数据：myData，
读者：我的读者
}),
校长（FG）：{
标签：“div”，
cls:“x面板标题”，
儿童：[
{tag:'div'，cls:'panel_header_main'，'html'：'Shopping Cart'}，
{tag:'div'，cls:'panel_header_icon1'，'html'：'''}，
{tag:'div'，cls:'panel_header_icon2'，'html'：'''}，
{标记：'div'，cls:'panel_header_extra'，'html'：'订单号：2837428347'}
]
},

看起来不错：

但当我添加下拉元素时，它不是简单的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' }
        ]
    },

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

var grid=new Ext.grid.GridPanel({
地区：'中心'，
样式：“边距：10px”，
存储：新的Ext.data.store({
数据：myData，
读者：我的读者
}),
校长（FG）：{
标签：“div”，
cls:“x面板标题”，
儿童：[
{tag:'div'，cls:'panel_header_main'，'html'：'Shopping Cart'}，
{tag:'div'，cls:'panel_header_icon1'，'html'：'''}，
{tag:'div'，cls:'panel_header_icon2'，'html'：'''}，
{标记：'div'，cls:'panel_header_extra'，'html'：'订单号：2837428347'}，
{
宽度：100，
xtype:'组合'，
模式：“本地”，
值：“en”，
触发动作：“全部”，
选择：对，
可编辑：false，
字段标签：“Produkt”，
名称：'语言'，
hiddenName:'语言'，
displayField:'名称'，
valueField:'值'，
存储：新Ext.data.JsonStore({
字段：['name'，'value']，
数据：[
{name:'derman'，value:'de'}，
{name:'English'，value:'en'}，
{name:'French'，value:'fr'}
]
})
}
]
},

它将脚本呈现到标题中：

---

甚至可以将非HTML元素放在面板的标题中吗？如果可以，如何操作？GridPanel有两个您可能感兴趣的属性：

tbar

，和

bbar

；分别是顶部和底部

工具栏允许您添加按钮、菜单项、下拉列表和其他ExtJS组件以及常规HTML

通常，工具栏代码与现有代码非常相似：

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

---

您最好将组合框放在网格工具栏中。工具栏扩展了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'}
                ]
            })
        }
    ]
}),

var grid=new Ext.grid.GridPanel({
地区：'中心'，
样式：“边距：10px”，
存储：新的Ext.data.store({
数据：myData，
读者：我的读者
}),
tbar：新的外部工具栏({
ctCls:“面板标题”，
项目：[
{xtype:'tbfill'}，
{tag:'div'，cls:'panel_header_main'，'html'：'Shopping Cart'}，
{tag:'div'，cls:'panel_header_icon1'，'html'：'''}，
{tag:'div'，cls:'panel_header_icon2'，'html'：'''}，
{标记：'div'，cls:'panel_header_extra'，'html'：'订单号：2837428347'}，
{
宽度：100，
xtype:'组合'，
模式：“本地”，
值：“en”，
触发动作：“全部”，
选择：对，
可编辑：false，
字段标签：“Produkt”，
名称：'语言'，
hiddenName:'语言'，
displayField:'名称'，
valueField:'值'，
存储：新Ext.data.JsonStore({
字段：['name'，'value']，
数据：[
{name:'derman'，value:'de'}，
{name:'English'，value:'en'}，
{name:'French'，value:'fr'}
]
})
}
]
}),

为此，您可以使用标题配置

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

标题：{
xtype:'标题'，
标题位置：0，
默认值：{
填充：“0”
},
项目：[
{
xtype:'mycombo'//或使用Ext.create（'class'）代替惰性实例化
}, {  
xtype:'按钮'，
文本：'\u2199'
}
]
},