我可以将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' }
]
},
看起来很好:
但是当我添加不像这样的普通HTML的dropdown元素时:
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'}
]
})
}
]
},
它将脚本呈现到标题中:
甚至可以将非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'}
]
})
}
]
}),