how do i override this item? [Archive]

jasonbronson

7 Dec 2007, 8:53 AM

i have the panel under complex.html and ive modified it so that i now have my logo at the bottom.

now i just need to hide the logo when the panel collapse's.
how do i hide this when the actual calls are in ext-all.js which is something i do not wish to modify

im able to do so from hyperlink running js but not from the collapse button
I found the collapse button is x-tool under class id for the button

Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
if(w.collapsed){
w.expand();
Ext.get('logo').setStyle('visibility', 'visible');
}else{
w.collapse();
Ext.get('logo').setStyle('visibility', 'hidden');
}

hendricd

7 Dec 2007, 8:57 AM

Can't tell where in relation to the collapsing panel your image is, with what little you posted.

Post your layout config (with the image planted in/near it)?

fay

7 Dec 2007, 9:00 AM

I'm assuming from your mention of panel and use of getCmp() you are talking about 2.0? Take a look at the beforecollapse and beforeexpand events in the documentation for Panel (http://extjs.com/deploy/dev/docs/output/Ext.Panel.html).

Something like:

myPanel.on('beforecollapse', function(p, animate){
Ext.get('logo').setStyle('visibility', 'hidden');
});

myPanel.on('beforeexpand', function(p, animate){
Ext.get('logo').setStyle('visibility', 'visible');
});

jasonbronson

7 Dec 2007, 9:01 AM

Can't tell where in relation to the collapsing panel your image is, with what little you posted.

Post your layout config (with the image planted in/near it)?

<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />



<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>


<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="TabCloseMenu.js"></script>

<style type="text/css">

html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.bluelink {
font: normal 12px verdana;
color: blue;
}
#sgslogo {
position:absolute;
bottom: 20px;
left: 15px;
z-index:20;
}
.x-btn-text-icon .x-btn-center .x-btn-text {
background-position:0pt 2px;
background-repeat:no-repeat;
padding:3px 0pt 2px 18px;
}

.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript">
Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32,
margins:'0 0 0 5'
}),{
region:'west',
id:'west-panel',
title:'Navigation Bar',
split:false,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'25 0 75 0',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
title:'Reports',
border:true,
iconCls:'nav'
},{
title:'Settings',
html:'<p>Some settings in here.</p>',
border:false,
iconCls:'settings'

}]
},
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
margins:'25 0 0 5',
plugins: new Ext.ux.TabCloseMenu(),
items:[{
contentEl:'center1',
title: 'Tab TEST 1',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Tab TEST 2',
autoScroll:true
}]
})
]
});
Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
if(w.collapsed){
w.expand();
Ext.get('logo').setStyle('visibility', 'visible');
}else{
w.collapse();
Ext.get('logo').setStyle('visibility', 'hidden');
}

});
});
</script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<div id="west" align=center>
<p><a href="#" class="bluelink">1 Reports</a></p>
<p><a href="#" class="bluelink">2 Reports</a></p>
<p><a href="#" class="bluelink">2 Reports</a></p>
<p><a href="#" class="bluelink">My Saved Reports</a></p>

</div>
<div id="north">
<img src='nyvip_image1.gif'> <img src='' height=0 width=200px> <img src='topheaderlogo.gif'>
</div>
<div id="center2">
<a id="hideit" href="#"> HIDE NAV BAR</a>
<p> TEST</p>

</div>
<div id="center1">
<p>TEST 2</p>
</div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="logo">
<img src='mainlogo.gif'>
</div>

</body>
</html>

jasonbronson

7 Dec 2007, 9:08 AM

thank you it worked fine

Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
if(w.collapsed){
w.expand();
Ext.get('logo').setStyle('visibility', 'visible');
}else{
w.collapse();
Ext.get('logo').setStyle('visibility', 'hidden');
}

});

var w = Ext.getCmp('west-panel');
w.on('beforecollapse', function(p, animate){
Ext.get('logo').setStyle('visibility', 'hidden');
});

w.on('beforeexpand', function(p, animate){
Ext.get('logo').setStyle('visibility', 'visible');
});