PDA

View Full Version : Panel hiding issue



clifficious
13 Mar 2013, 4:05 AM
Hi,

I have a problem with hiding and showing a panel. Maybe I'm overseeing something. I have a panel which acts as my viewport with border layout:



Ext.define('MyApp.Viewport', { extend : 'Ext.panel.Panel',
alias : 'widget.viewport',
itemId : 'viewport',

border : false,
layout : 'border',


sidepanel : Ext.create('MyApp.SidePanel'),
mappanel : Ext.create('MyApp.Map'),



initComponent : function() {
var me = this;


Ext.apply(me, {
dockedItems : [ Ext.create('MyApp.Header') ],
items : [
this.sidepanel,
this.mappanel
]
});
me.callParent(arguments);
}

});

I want to hide the sidepanel and only show it after some event (e.g. user logs in). This is how my sidepanel looks like:


Ext.define('MyApp.SidePanel', {
extend: 'Ext.form.Panel',
alias: 'widget.sidepanel',
itemId: 'sidepanel',


width: '25%',
region: 'west',
collapsible: true,
collapsed: true
titleCollapse: false,
defaults : {
border: 0,
},

title: 'Sidepanel',
defaults: {
margin: 5
},

initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'settingspanel'
},
{
xtype: 'selectionpanel'
}
]
});


me.callParent(arguments);
}


});

Now whenever I call sidepanel.setVisible(false) it is still shown. I also tried hiding it at the point of creation.

sidepanel : Ext.create('MyApp.SidePanel',{hidden:true}),
or writing it directly into the panel as config item. But that does not affect the panel. It is always rendered. Am I missing something?

Thanks for any help!

slemmon
13 Mar 2013, 8:16 AM
It looks like you're creating a side-panel component as the value of the 'sidepanel' config in your 'MyApp.Viewport'. Are you also adding it to the MyApp.Viewport's items array at some point?

clifficious
14 Mar 2013, 1:57 AM
It looks like you're creating a side-panel component as the value of the 'sidepanel' config in your 'MyApp.Viewport'. Are you also adding it to the MyApp.Viewport's items array at some point?

Hi slemmon,

thanks for your answer. I though I already answered yesterday, but did hit the "reply to Thread" button, which confusingly opens a new form if I am in the quick answer mode.

Anyway, I'm adding the sidepanel in the first code snippet in the Ext.apply block. It is rendered correctly. I'm having an issue with letting it hide or setting the visibility to false.

slemmon
14 Mar 2013, 8:16 AM
See this JSFiddle example:
http://jsfiddle.net/slemmon/7Mn4r/

This seem like what you're asking about?
*Feel free to edit the fiddle as needed.

clifficious
15 Mar 2013, 5:51 AM
See this JSFiddle example:
http://jsfiddle.net/slemmon/7Mn4r/

This seem like what you're asking about?
*Feel free to edit the fiddle as needed.

Thanks, helps a lot. It now somehow works.