PDA

View Full Version : hidden: true problems



Tyr_
7 Jan 2014, 4:21 AM
Hi,

i have a problem with the config "hidden" on panels or containers. I have a container (or a panel) that should be hidden by default. Depending on a given event (button click as example) the given container should be displayed. Here is an example:


Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
id: 'formPanel',
renderTo: 'form-ct',
defaults: {
hideMode: 'offsets'
},
items: [
{
xtype: 'panel',
layout: {
type: 'table',
columns: 1
},
items: [
{
xtype: 'panel',
id: 'cont1',
hidden: true,
width: 320,
height: 240,
style: {
backgroundColor: '#990000'
}
},
{
xtype: 'button',
text: 'click me',
listeners: {
click: function() {
Ext.getCmp('cont1').show();
}
}
}
]
}
]
});
});

I've expected that the container will be shown after click on the button. But his DOM isn't rendered if hidden is set to true. In my real project, i have strange effects about that. I have a tabpanel with 4 tabs. The first tab contains two panels, one is hidden: true, one is shown. I'm using a button to switch both panels via Ext.getCmp('hiddenpanel').show()/hide(). It works perfect. The code above doesn't. Same behavior occurs in tab 2 of my tabpanel. I have a container that is hidden:true, a change event on a radiobutton group will show the hidden container, inside of this container is an additional container (tab content is a survey with nested questions, some things will be shown or hidden, depending on the given answers) who is also hidden: true. The parent container can be displayed via show() method, the child container cannot, because he doesn't appear in dom. If i remove the hidden: true setting, it will be shown. I tried deferredRender config on the tabpanel to render all tab contents regardless of the initial active tab.

Am i missing something?

Thanks in advance

Tyr

scottmartin
8 Jan 2014, 1:24 PM
You will need to update the layout of the main panel of you want to use this approach



Ext.onReady(function() {
var mainPanel = Ext.create('Ext.form.Panel', {
// id: 'formPanel',
title: 'formPanel',
html: 'formPanel',
renderTo: Ext.getBody(),
defaults: {
hideMode: 'offsets'
},
layout: { // should specify a layout
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
title: 'tablepanel (no height)',
html: 'tablepanel',
layout: {
type: 'table',
columns: 1
},
items: [{
xtype: 'panel',
id: 'cont1',
title: 'cont1Panel',
html: 'cont1Panel',
hidden: true,
width: 320,
height: 240,
style: {
backgroundColor: '#990000'
}
}, {
xtype: 'button',
text: 'click me',
listeners: {
click: function() {
Ext.getCmp('cont1').show();
mainPanel.doLayout();
}
}
}]
}]

});
});