PDA

View Full Version : [CLOSED] Panel - Hide Header on Collapse



amitpareek
May 18, 2012, 8:03 PM
Hey,
Header does'nt hide when the panel collapse. It shows up as a placeholder when I collapse. I have tried PreventHeader="true". But does'nt work.

geoffrey.mcgill
May 18, 2012, 8:35 PM
Hey,

I don't know what you mean. Screen captures? More information required.

amitpareek
May 19, 2012, 5:44 AM
Hey Geoff,
Here's the code :


<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:Panel runat="server" PreventHeader="true" ID="panel1" Height="200">

</ext:Panel>




<ext:Button runat="server" Text="Show/Hide">
<Listeners>
<Click Handler="App.panel1.collapsed==false?App.panel1.collapse(): App.panel1.expand();"></Click>
</Listeners>
</ext:Button>


The panel wont show header when expanded. But when collapsed, it will display.

amitpareek
May 19, 2012, 5:56 AM
1 more minor issue.

panel.collapsed will be false when expanded and when collapsed its value changes to "top" or any position we assign to. Should'nt that be logically just "true" and have collapsedPosition hold the position value.

Vladimir
May 19, 2012, 7:29 AM
Hi,

Well, you can set CollapseMode="Mini" but it is better to use show/hide if you don't use a header



panel.collapsed will be false when expanded and when collapsed its value changes to "top" or any position we assign to. Should'nt that be logically just "true" and have collapsedPosition hold the position value.

It ExtJS logic, javascript allows to consider any non empty string as true. Therefore you can use the following javascript construction


if(App.Panel1.collapsed){
alert('the panel is collapsed');
}

amitpareek
May 19, 2012, 7:34 AM
Hey Geoff,
I downloaded latest version from SVN and collapse seems to be working when I add CollapseMode=Mini. The beta version on Nuget does'nt work.

The latest version also does'nt have PreventHEader. It just has Header.

I think it should just work if I provide Header=false. Like it was in previous version.

Also when I collapse with CollapseMode=Mini, I thin line appears. Its the border. If I set Border=false. I thin white line appears, which is probably the background of panel. In v1.3 it would hide completely.



<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:Panel runat="server" ID="panel1" Height="200" CollapseMode="Mini" Margin="10" Border="false" TitleCollapse="true" >

</ext:Panel>





<ext:Button runat="server" Text="Show/Hide">
<Listeners>
<Click Handler="App.panel1.collapsed==false?App.panel1.collapse(): App.panel1.expand();"></Click>
</Listeners>
</ext:Button>


Value of panel.collapsed when collapsed and expanded is still an issue.

Vladimir
May 19, 2012, 8:06 AM
The latest version also does'nt have PreventHEader. It just has Header.

PreventHeader is deprecated in ExtJS 4.1 and should not be used



I downloaded latest version from SVN and collapse seems to be working when I add CollapseMode=Mini. The beta version on Nuget does'nt work.

Yes, ExtJS version is used in Beta doesn't support Mini mode



Also when I collapse with CollapseMode=Mini, I thin line appears. Its the border. If I set Border=false. I thin white line appears, which is probably the background of panel.

Yes, it is designed behaviour. Mini mode always render one line border



Value of panel.collapsed when collapsed and expanded is still an issue.

I don't see any issue, any non empty string is considered as true (panel is collapsed)


<Click Handler="App.panel1[App.panel1.collapsed ? 'collapse':'expand']();"></Click>


As mentioned before, I don't see any sense to use collapse/expand functionality if you don't use a header, it is better to use show/hide

amitpareek
May 19, 2012, 8:16 AM
Hi Vlad,
Thanks for your reply. My only issue is I have lots of code where I use this. I have to change a lot of it. And I just think, setting header as false, should hide header when collapsed too. Why have it as default placeholder when its set to hide? It may be part of ExtJS 4.1 but it does'nt seem logical.

I use Collapse/Expand bcoz of slide animation they have. I will have to call el.hide() with animate param. Also that does'nt set the hidden property of panel to true if its hidden. I have to again manually do it.

I appreciate the fact that new framework will have new changes which is fine. But this looks like more code for the same stuff we did earlier.

Vladimir
May 19, 2012, 9:32 AM
Why have it as default placeholder when its set to hide? It may be part of ExtJS 4.1 but it does'nt seem logical.

It is ExtJS 4 behaviour, it uses separate placeholder element for collapsed panel

amitpareek
May 19, 2012, 11:34 AM
SO are you trying something to fix this issue?

Vladimir
May 19, 2012, 12:17 PM
I don't think that it is an issue, it is designed behaviour
If you need to hide header for collapsed state then it is need to use show/hide methods instead expand/collapse
Or you can set CollapsedCls="hide-offsets" for panel to hide the panel after collapse

Vladimir
May 19, 2012, 12:20 PM
I will post a question to sencha forum, if they consider it is issue as a bug then it will be fixed by Sencha

Daniil
Jun 15, 2012, 12:31 PM
I have reported it to Sencha and will monitor.
http://www.sencha.com/forum/showthread.php?220394

Daniil
Jun 15, 2012, 1:57 PM
Sencha has opened a bug ticket. They are going to add a respective config option for that case.

Daniil
Aug 27, 2012, 8:10 AM
Sencha has been fixed it. I am clarifying how exactly.
http://www.sencha.com/forum/showthread.php?220394&p=878178&viewfull=1#post878178

Also I can't see this fix in ExtJS 4.1.1, so, probably, it should appear in the next release.

Daniil
Oct 17, 2012, 10:47 AM
Now a header doesn't appear in your scenario. The fix has been incorporated to the 2.1 branch.

Thanks again for the report.