View Full Version : Checkbox in a panel header.

16 Jun 2010, 5:19 AM

I am looking for some hint to do the following :
I have a few panel containing only check-boxes.
In order to check/uncheck them all I have "replaced" the header by a toolbar with a checkbox and when this box is un-/checked, it un-/checks all the inner checkboxes.

It's working fine but now, I want to allow my panel to be collapsible ... and there things are getting harder as I can't find a way to customize the header in that way ...

Here is a shot to give let you see what I mean. In the left window I have a header and a tool bar for both panel.
The right window is paint-edited window of what I want.

Thanks for any input.

18 Jun 2010, 12:25 AM
Answering to myself,

It's may be an overkill but I handled this by removing the header, leaving a toolbar as before and adding a new button to it.
This button calls the toggleCollapse() method of a new inner panel that I added inside the panel containing the toolbar.

I had then to handle the background image of my button.

18 Jun 2010, 12:30 AM
Yup, overkill:

new Ext.Panel({
width: 400,
height: 400,
renderTo: document.body,
title: 'Foo',
listeners: {
afterrender: function(c){
var el = c.header.insertFirst({
tag: 'input',
type: 'checkbox'
el.on('click', function(e, t){

Add a bit of styling and you're done.

18 Jun 2010, 1:00 AM
Or even:

title: '<input type="checkbox" /> Foo',
listeners: {
afterrender: function(c){
this.header.child('input').on('click', function(e){
// do stuff