PDA

View Full Version : How to get collapsed panel click event


falcondot
23 Aug 2007, 9:14 PM
Hi,

Following is my code and I wanted to know how can I get the following event ---
when a panel is collapsed in the layouts example, there are two different events associated with that collapsed panel...one is when we click on the arrows image on the collapsed panel and the other is when we click on that panel any where other than that arrow image.

On both the events the panel is opened but the difference been that when we click on arrow image the panel is completely opened where as on other event panel just open for a short duration and than closes . I wanted to change this event to the first one , so that on both the clicks panel open completely .

Waiting for some reply.



<html>
<head>
<link rel="stylesheet" type="text/css" href="../../..\\IA-3.2\\interactiveavenues-war\\src\\main\\webapp\\css\\ext-all.css"/>
<script type="text/javascript" src="../../..\\IA-3.2\\interactiveavenues-war\\src\\main\\webapp\\js\\yui-utilities.js"></script>
<script type="text/javascript" src="../../..\\IA-3.2\\interactiveavenues-war\\src\\main\\webapp\\js\\ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../..\\IA-3.2\\interactiveavenues-war\\src\\main\\webapp\\js\\ext-all-debug.js"></script>
</head>
<body>
<div id="north-div">North </div>
<div id="east-div">East </div>
<div id="west-div">West </div>
<div id="center-div"> Center</div>
</body>
<script>
var mainLayout = new Ext.BorderLayout(document.body, {
north: {
initialSize: 125
},
west: {
minSize: 250,animate: false, split: true, initialSize: 400, titlebar: true, collapsible: true
},
east: {initialSize: 20,titlebar: true ,collapsedTitle: 'Status', collapsible: false },
center: { titlebar: true, collapsible: true,autoScroll:true}
});
mainLayout.beginUpdate();
mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
fitToFrame: true
}));
mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
fitToFrame: true
}));
mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
fitToFrame: true, closable: false, title: 'Filters',autoScroll: true,height:700
}));


mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
fitToFrame: true, autoScroll: true, title: 'Reports Section'
}));

mainLayout.endUpdate();
</script>
</html>
jsakalos
25 Aug 2007, 3:08 PM
You can override the original event handler. See doc of Ext.override.

Cheers,
shibubh
25 Aug 2007, 8:53 PM
hi
i think this will help you
in ext we can get the element of collepsed panel which is shown when it is collepsed. so first you have to get the element of the collepsed pannel. ok the following code will help.


var westr= mainLalyout.getRegion('west');//get the west panel
var westRegionCl = westr.collapsedEl;//collepsed elemtent of west pannel
westRegionCl.removeAllListeners();//first remove all Listenets
westReClDiv.on('click',function(){ //associate click event if the westregion collepsed panel
if(westr.collapsed)
westr..expand();

},this) ;
falcondot
26 Aug 2007, 8:47 PM
Hi shibubh,

the code worked gr8 for me, only issue been can't I change this event on page load when the region is not collapsed ....

as of now I have added this function to the west region on the collapsed event of west region , so each time the region is collapsed this event handler is added to that region.Is there any better solution ?



mainLayout.getRegion('west').on("collapsed",changeEventHandler);

function changeEventHandler(){
var westr= mainLayout.getRegion('west');//get the west panel
var westRegionCl = westr.collapsedEl;//collepsed elemtent of west pannel
westRegionCl.removeAllListeners();//first remove all Listenets
westRegionCl.on('click',function(){ //associate click event if the westregion collepsed panel
if(westr.collapsed)
westr.expand();
},this) ;
}
shibubh
27 Aug 2007, 11:36 PM
HI
sorry i dont completely understand your problem and as per the code snipped by
you. i think you have to add the following code just after the

mainLayout.endUpdate();
var westr= mainLayout.getRegion('west');//get the west panel
var westRegionCl = westr.collapsedEl;//collepsed elemtent of west pannel
westRegionCl.removeAllListeners();//first remove all Listenets
westRegionCl.on('click',function(){ //associate click event if the westregion collepsed panel
if(westr.collapsed)
westr.expand();
},this) ;
}



because as per you code, each time the west region is collapsed changeEventHandler() function is call. this is not good. because you just want to completly open the west region,when it is clicked.