View Full Version : [CLOSED-329] Show event doesnt fire first time

17 Sep 2010, 4:45 AM
To get the show event to fire on a panel, when i invoke the show method, i have to explicit set hidden: true to the panel when created.

Me for one dont find it logical that I have to set that, atleast not when its floatable and usually isnt shown right away.
Can we get the default value of hidden to be true if floatable is set to true?

Im having a hard time to determine if this works as intended or its a bug. But from the code, on the show-method (line 23266 in debug-comment) we only fire events if its not rendered or if the panel is hidden.

22 Sep 2010, 11:11 AM
The team is reviewing your suggestion and they will let you know what they decide.

23 Sep 2010, 8:54 AM
Could you please provide a code example? If you instantiate a panel and you dont render it yet, and you call show the first time, it should fire the show event. Are you rendering the panel before you call show?

23 Sep 2010, 10:49 PM
Yea, the panel is rendered. Im resuing the same panel, im having trouble with to many images in memory so I wanna use the same img-tag over and over again.

There is the example code. If i set the overlay to hidden:true all is good. But I found one more bug during this example. If you set hidden:true so that the image shows. If I call hide on doubletap, it wont be hidden. The variable hidden on the panel wont change so show() wont work a second time.

tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function () {
this.images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

new Ext.Panel({
fullscreen: true,
centered: true,
layout: 'vbox',
items: [{
xtype: 'button',
text: 'show',
handler: function () {
var rnd = Math.floor(Math.random()*3);
this.overlay.imageSrc = this.images[rnd];
scope: this
scope: this

this.overlay = new Ext.Panel({
floatable: true,
fullscreen: true,
scroll: 'both',
modal: true,
hidden: true,
imageSrc: '',
html: '<img id="zoomImage" />',
listeners: {
show: function () {
Ext.getBody().mask(true, 'Loading image...');
var img = this.el.select('img#zoomImage').elements[0];
img.onload = function () {
img.src = this.imageSrc;
afterrender: function(s) {
s.mon(s.el, {
doubletap: function () {

23 Sep 2010, 11:20 PM
You've explicitly set fullscreen: true on the panel, which means it will be automatically shown when created. I wouldn't really class this as a bug.

It seems like it would be better to use a card layout, if you want to toggle between 2 fullscreen items.

23 Sep 2010, 11:30 PM
I can agree on that, thats why I didnt know if it was a bug or worked as intended. Kinda like the effect tho to bound around the image and see that there is something behind it. Gives the feeling of being zoomed.

But what about hide() not properly hiding the component? Since it wont show again?