PDA

View Full Version : Extending Ext.Panel to contain other panels that are hidden then shown



Izhaki
10 Mar 2011, 4:40 AM
Hi,

Trying to write a component that contains two other panels. Not sure where should I create the two other panels, at the moment I do so in the initComponent method:



MyApp.MyComp = Ext.extend(Ext.Panel,
{
initComponent: function() {
Ext.apply(this,{
items: [{
layout: 'anchor',
items: [
{
id: 'h-panel',
hidden: true,
items: dataView1
},{
items: dataView2
}
]
}]
});
MyComp.superclass.initComponent.call(this);
},
});


The problem I have with this (reduced code above) is that the panel containing dataView1 which has 'hidden: true' does not show upon calling Ext.getCmp('h-panel').show() because the div still has 'style="display: none;"', so I'm thinking probably I'm not initialting these component at the right place.

walldorff
11 Mar 2011, 4:37 PM
MyComp.superclass.initComponent.call(this);

MyApp.MyComp.superclass.initComponent.call(this);

Izhaki
13 Mar 2011, 3:14 AM
Hi walldorff,

Thanks for your reply. Missed 'MyApp' when reduced the code for the minimum needed for this post.

The problem will persist with MyApp being there.

Thanks

walldorff
13 Mar 2011, 4:01 AM
I tested this:

Ext.ns('MyApp');

MyApp.MyComp = Ext.extend(Ext.Panel, {
initComponent: function() {
Ext.apply(this,{
items: [{
layout: 'anchor',
items: [{
id: 'h-panel',
hidden: true,
items: [{html:'panel 1'}]
},{
items: [{html:'panel 2'}]
}]
}]
});
MyApp.MyComp.superclass.initComponent.call(this);
} // , <======= delete this comma
});

var app = new MyApp.MyComp({
renderTo: Ext.getBody()
});

var p1 = Ext.getCmp('h-panel');
p1.show();

Inspecting HTML:

<div class="x-panel-bwrap" id="ext-gen12">
<div class="x-panel-body x-panel-body-noheader" id="ext-gen13" style="width: 1408px; ">
<div id="ext-comp-1003" class=" x-panel">
<div class="x-panel-bwrap" id="ext-gen16">
<div class="x-panel-body x-panel-body-noheader" id="ext-gen17">
panel 1
</div>
</div>
</div>
</div>
</div>

This works :)

Izhaki
13 Mar 2011, 4:54 AM
Are you sure about this?

Your HTML doesn't have a div with id 'h-panel'?

Here's the exact html file I'm using, of which parts I've copied and pasted from your reply, and I can only see panel 2:


<html>
<head>
<link rel="stylesheet" type="text/css" href="../js/extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/extjs/ext-all-debug.js"></script>


<script type="text/javascript">

Ext.ns('MyApp');

MyApp.MyComp = Ext.extend(Ext.Panel, {
initComponent: function() {
Ext.apply(this,{
items: [{
layout: 'anchor',
items: [{
id: 'h-panel',
hidden: true,
items: [{html:'panel 1'}]
},{
items: [{html:'panel 2'}]
}]
}]
});
MyApp.MyComp.superclass.initComponent.call(this);
}
});

var app = new MyApp.MyComp({
renderTo: Ext.getBody()
});

var p1 = Ext.getCmp('h-panel');
p1.show();

</script>
<link rel="stylesheet" type="text/css" href="../css/extjs.css"/>

</head>
<body>

</body>
</html>

Izhaki
13 Mar 2011, 5:09 AM
'Improved' version of the test code. Still can only see panel 2:



<html>
<head>
<link rel="stylesheet" type="text/css" href="../js/extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/extjs/ext-all-debug.js"></script>

<script type="text/javascript">

Ext.ns('MyApp');

MyApp.MyComp = Ext.extend(Ext.Container, {
initComponent: function() {
Ext.apply(this,{
layout: 'anchor',
items: [{
id: 'h-panel',
hidden: true,
items: [{html:'panel 1'}]
},{
items: [{html:'panel 2'}]
}]
});
MyApp.MyComp.superclass.initComponent.call(this);
}
});

var app = new MyApp.MyComp({
renderTo: Ext.getBody()
});

var p1 = Ext.getCmp('h-panel');
p1.show();

</script>
</head>
<body>
</body>
</html>

Izhaki
13 Mar 2011, 5:57 AM
This, by the way, only happens with 'anchor' layout.

I've tried to debug ExtJS to see where that 'display: none' is injected, or how it might be removed by the selected layout, and simply couldn't find either.

walldorff
13 Mar 2011, 6:34 AM
Hmm... strange. It works with me.

Your HTML doesn't have a div with id 'h-panel'?
I'm sorry, didn't paste the right div. See images.