PDA

View Full Version : Best way to make a pull down panel?



LeeStewart
25 Feb 2010, 5:16 AM
I've been slowly replacing my jquery code with EXTJS and I've started to look at the login panel. Currently this is set up as an absolute div with the top at 0px and located towards the right side of my header. The jquery code collapses the div and there's a small button on the bottom, which slides the div out or shuts it when the div is open.

To replace it with EXTJS, I thought I'd delete the div's contents and render an Ext.Panel() there. inside that panel would be a collapsible region and then a bbar item (or fbar? are they the same?). I want to style it to match the rest of my site, so I'm trying to reduce the amount of ext class stuff.

I thought I could do something like:


this.loginPanel = new Ext.Panel({
id: 'ext-login_panel',
layout: 'border',
renderTo: 'login_panel', // div in HTML document.
width: 300,
height: 200,
header: false,
unstyled: true,
items: [
new Ext.FormPanel({
id: 'ext-login_form',
header: false,
fit: true,
autoHeight: true,
autoWidth: true,
collapsible: true,
animateCollapse: true,
animate: true,
region: 'center',
unstyled: true,
items: [{
border: false,
html:
'<h1>Login Panel Stuff</h1>'+
'User Name: [_____________]<br>'+
'Password: [*************]<br><br>'+
'[Login &gt;]'
}]
})
],
bbar: {
id: 'ext-login_bbar',
unstyled: true,
items: [
'<span class="ajax-name">Welcome: UserName</span>',
'->',
{
text: 'Login',
iconAlign: 'right',
iconCls: 'icon-arrow_south',
handler: function() {
if (the panel is open) {
Ext.getCmp('ext-login_form').collapse();

} else {
Ext.getCmp('ext-login_form').expand();
}
}
}]
}
});
I've spent a lot of time looking around for the flags to set and it's getting better, but I still need to figure out the following:

1) I don't want to set the height and width of the main panel. Is there an easy way to have it automatically be the size of the login form panel? Removing the height and width causes the form panel to be zero pixels tall.

2) The collapse() method works fine, except the main panel doesn't shrink. Is that related to specifying a height?

3) I'm not sure how to check if the panel is collapsed. I could use the toggelCollapse() method, but I want to control the panel from some other places in my JavaScript code and I'll need to know the state.



Thanks for any pointers!

Lee

LeeStewart
26 Feb 2010, 5:23 AM
I have a proper set of fields on the FormPanel. Might have been obvious, but just making sure.

Thanks,
Lee

LeeStewart
27 Feb 2010, 10:49 AM
Anyone looking for the answer:

I removed the "layout:border" from the parent panel so EXTJS uses the default layout and also set "autoHeight:true".

On the bbar button handler, I perform the following:

if (Ext.getCmp('ext-login_form').getHeight()) {
this.setIconClass('icon-arrow_south');
Ext.getCmp('ext-login_form').collapse();

} else {
this.setIconClass('icon-arrow_north');
Ext.getCmp('ext-login_form').expand();
Ext.getCmp('login-user_name').focus('', 10);
}Basically, this does three things: if the height isn't zero, collapse the panel (otherwise expand it). The code also toggles the icon images, to give the user some feedback on what to do. The last trick is to set the focus when the panel is expanded - I put it on the login-user_name field.

The panel now slides from the top of the screen when the user clicks the "login" button and the cursor is on the username field. The panel slides back when they submit (the code for that is elsewhere) or if they click the "login" button again.

To make things little more polished, I put the user's name on the tab (the "ajax-name" span), change the text on the button to "logout", and auto collapse the panel when they log in. I also change the mouse over on the button to give the user a little more feedback.


Hope this helps someone else!

LEE