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

本文介绍了如何在ExtJS面板的标题中放置一个下拉列表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我可以将HTML元素如文本和图像放在面板标题中，如下所示：

I can put HTML elements such as text and images in a panel header like this:

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

看起来不错：

但是当我添加下拉元素这不是像这样的纯HTML：

but when I add dropdown element that is not plain HTML like this:

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

它呈现脚本进入标题：

it renders script into the header:

是否可以将非HTML元素放在面板的标题中？如果是这样，它是如何做的？

推荐答案

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

You're probably better off placing your combo in the grid's toolbar. Toolbars extend Ext.Container and are therefore much better suited for containing other Ext components. Try the following:

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