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' }
]
},
which looks fine:
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: 'bo',
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:
Is it even possible to put a non-HTML element inside the header of a panel? If so, how is it done?
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' }
]
},
which looks fine:
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: 'bo',
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:
Is it even possible to put a non-HTML element inside the header of a panel? If so, how is it done?
Share Improve this question edited Feb 28, 2011 at 11:55 Edward Tanguay asked Feb 28, 2011 at 11:14 Edward TanguayEdward Tanguay 194k321 gold badges725 silver badges1.1k bronze badges3 Answers
Reset to default 4You're probably better off placing your bo in the grid's toolbar. Toolbars extend Ext.Container and are therefore much better suited for containing other Ext ponents. 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: 'bo',
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 have two properties that may be of interest to you: tbar
, and bbar
; top and bottom toolbars, respectively.
Toolbars allow you to add buttons, menu items, dropdowns, and other ExtJS ponents along with regular HTML. There is an example of a toolbar on the ExtJS examples page.
Generally, the toolbar code would be very similar to your existing code:
//instead of 'headerCfg:'
tbar: {
xtype: 'toolbar',
cls: 'x-panel-header',
items: [
//your items
]
}
You can use the header config for this purpose.
header: {
xtype: 'header',
titlePosition: 0,
defaults: {
padding: '0 0 0 0'
},
items: [
{
xtype: 'mybo' // or use Ext.create('class') instead of lazy instantiation
}, {
xtype: 'button',
text: '<b>\u2199</b>'
}
]
},