View Full Version : What is the best practice for adding buttons to a header

4 Jan 2011, 8:44 AM
I'm using a border layout and for some of the regions in the layout I would like to add buttons and images to the header. From everything I've read on the API docs and from my testing there is no nice way of directly adding buttons and other components to the header. I've been playing around with manually adding the buttons using HTML and headerCfg, but I wanted to see if there were possibly better ways of doing this.

My very simple example is below:

var temp = {
tag: 'div',
cls: 'x-panel-header',
cn: [
tag: 'div',
cls: 'x-panel-header-title',
html: 'Metrics <span style=\'float:right\'>Wheee! <button type=\'button\'>Button!</button></span>'

var form = {
layout: 'border',
height: 400,
border: true,
bodyBorder: true,
title: 'Test Version',
items: [{
title: 'Org Level',
region: 'west',
margins: '5 0 0 5',
width: 200,
collapsible: true,
cmargins: '5 5 0 5',
id: 'west-region-container',
layout: 'fit',
split: true,
items: [some_tree_panel_item]
}, {
region: 'center',
layout: 'border',
items: [{ headerCfg: temp, id: 'MetricPanelRegion', region: "north", split: true, height: 75, margins: '5 5 0 0', collapsible: true, layout: 'fit', items: [some_item] }, { title: "center", region: "center", collapsible: true, margins: '5 5 0 0', layout: 'fit', items: [some_item2]}]