Accordion structure is broadly used ExtJS parts due to its capability to show a number of panels in accordion one over one other. An accordion structure is a structure that manages a number of Panels in an expandable accordion model such that by default just one Panel may be expanded at any given time. Every Panel has built-in help for increasing and collapsing.
To broaden/ collapse Panels consumer have to click on on icon accessible on proper aspect of the header. Let’s see how can we broaden collapse panels on ‘mouseover’ occasion on Panel.
First create your personal Panel by extending ExtJS’s panel and add following code on ‘afterrender’ occasion to help computerized broaden/collapse on mouseover/mouseout occasion. I’m utilizing Ext.defer
technique to deplay expantion by 1 second.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
Ext.outline(‘org.techzoo.TechZooPanel’, {
prolong : ‘Ext.panel.Panel’,
alias : ‘widget.tzpanel’,
listeners: {
afterrender: perform(me, eOpts){
me.header.el.on(‘mouseover’, perform() {
Ext.defer(perform(){
if (me.collapsed) {me.broaden();}
}, 1000);
});
/*
//Code to help collapse on mouseout
me.header.el.on(‘mouseout’, perform() {
Ext.defer(perform(){
if (me.collapsed == false) {me.collapse();}
}, 1000);
});
*/
}
}
});
|
Now create a container Panel with accordion structure and add above panel as a baby gadgets.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
Ext.create(‘Ext.panel.Panel’, {
width: 300,
defaults: {
bodyStyle: ‘padding:5px’
},
structure: {
sort: ‘accordion’,
titleCollapse: false,
animate: true,
activeOnTop: true
},
gadgets: [{
xtype : ‘tzpanel’,
top: 180,
icon : ‘pictures/icon_module16.png’,
title : ‘Person Administration’,
html : ‘Person Administration is an authentication function’
},{
xtype : ‘tzpanel’,
title : ‘Software program Venture Administration’,
icon : ‘pictures/server_software.png’,
html : ‘Software program Venture Administration’
},{
xtype : ‘tzpanel’,
title : ‘Search Initiatives’,
icon : ‘pictures/viewmag.png’,
gadgets : [{
xtype : ‘textfield’,
fieldLabel: ‘Venture Title’
},{
xtype : ‘textfield’,
fieldLabel: ‘Supervisor Title’
},{
xtype : ‘button’,
textual content : ‘Login Now’
}]
}],
renderTo: ‘output’
});
|
Supply techzoo.org