PDA

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



Kask
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.

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

TommyMaintz
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?

Kask
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.



Ext.setup({
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];
this.overlay.show('fade');
},
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 () {
Ext.getBody().unmask();
};
img.src = this.imageSrc;
},
afterrender: function(s) {
s.mon(s.el, {
doubletap: function () {
this.hide('fade');
}
});
}
}
});
},
});

evant
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.

Kask
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?