ExtJS panel has potential to collapsed and broaden by clicking on icon. To break down/broaden any panel consumer has to click on on proper nook icon which is many instances very irritating. How may we collapse/broaden panel by clicking wherever in panel header? Following code display it.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
Ext.onReady(perform () {
Ext.widget(‘panel’, {
title: ‘Panel Header Collapse’,
bodyPadding: 10,
collapsible: true,
width: 400,
peak: 100,
html: ‘Collapse/Increase on Header Click on.‘,
listeners: {
afterrender: perform(panel) {
panel.header.el.on(‘click on’, perform() {
if (panel.collapsed) {panel.broaden();}
else {panel.collapse();}
});
}
},
renderTo: ‘output’
});
});
|
On-line Demo
Supply techzoo.org
