PDA

View Full Version : How to edit / rewrite an event?



Elfayer
24 Jul 2012, 4:03 AM
Hi,

I have a problem with the "maximize" event of the windows and I would like to edit it or totally rewrite it.
Is it possible?

WillBill
24 Jul 2012, 5:08 AM
Add a listener for the event and implement your own code




Ext.create (http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-create)('Ext.window.Window (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.window.Window)',
{
title:'Hello',
height:200,
width:400,
layout:'fit',
listeners: {
maximize: function(me, obj) {
console.log('maximized');
}
}
}).show();

Elfayer
24 Jul 2012, 5:13 AM
That does not inhibits the classic event. If I write :



listeners: {
maximize: function () {
alert("toto");
}
}


It display the alert but the window is still maximized.

WillBill
24 Jul 2012, 5:36 AM
You're right. How about fetching the click event when someone presses the maximize button?
This would be before the maximize event fires and you could implement your own function in
there or fire a different event.

WillBill
24 Jul 2012, 5:42 AM
this should be even better:



Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
tools: [{
type: 'maximize',
handler: function(){
console.log('maximize');
}
}]
}).show();


//Edit
Or just override the function that controlls maximizing the window



Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
maximizable: true,
maximize: function() {
console.log('no maximize!');
}
}).show();


If you want to edit it, just dig into the code and find the maximize function and copy/paste
it in your own function and change it to your liking

Elfayer
24 Jul 2012, 6:09 AM
Thanks it helps me a lot, but How can I change the image of the maximize tool when the window is maximized? (like naturally)

WillBill
24 Jul 2012, 6:23 AM
I don't know what you changed, but the code below will toggle the maximize tool image without
maximizing the window.




Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
maximizable: true,
maximize: function() {
var me = this;


if (!me.maximized) {
if (me.maximizable) {
me.tools.maximize.hide();
me.tools.restore.show();
}
me.maximized = true;
}
return me;
}
}).show();

Elfayer
24 Jul 2012, 6:32 AM
Perfect =)
Now I have an other problem :D

Normally when a window is maximized, the new button restores the window. But I have set the size and the position with "maximize". So is there a way to get the lastest position and size of a window or do I have to store it?

WillBill
24 Jul 2012, 6:41 AM
I believe this stores your height/width



if (!me.hasSavedRestore) {
me.restoreSize = me.getSize();
me.restorePos = me.getPosition(true);
}

Elfayer
24 Jul 2012, 6:46 AM
This isn't working :

Ext.define('DSK.view.desktopCenter.WindowApplication', {
extend: 'Ext.window.Window',
alias: 'widget.windowApplication',

width: 300,
height: 200,
minimizable: true,
maximizable: true,
maximize: function () {
var vp = Ext.ComponentQuery.query('#Viewport')[0];
var vpSize = vp.getSize();
var taskbar = Ext.ComponentQuery.query('taskbar')[0];
var posTb = taskbar.getPosition();
var winPos = this.getPosition();
var winSize = this.getSize();

if (winPos[0] == 0 && winPos[1] == 0)
this.restore();
else {
this.restoreSize = this.getSize();
this.restorePos = this.getPosition(true);

this.setPosition(0, 0);
this.setSize(vpSize.width, posTb[1]);
this.tools.maximize.hide();
this.tools.restore.show();
}
}
})

WillBill
24 Jul 2012, 6:56 AM
I'm not sure what you're doing, but below is the original code. I would edit this, instead of creating your own. It should be pretty straight forward.

Just remove the part you don't want, but keep the parts that handle the functions you'd like to keep.




maximize: function() {
var me = this;
if (!me.maximized) {
me.expand(false);
if (!me.hasSavedRestore) {
me.restoreSize = me.getSize();
me.restorePos = me.getPosition(true);
}
if (me.maximizable) {
me.tools.maximize.hide();
me.tools.restore.show();
}
me.maximized = true;
me.el.disableShadow();
if (me.dd) {
me.dd.disable();
}
if (me.collapseTool) {
me.collapseTool.hide();
}
me.el.addCls(Ext.baseCSSPrefix + 'window-maximized');
me.container.addCls(Ext.baseCSSPrefix + 'window-maximized-ct');
me.syncMonitorWindowResize();
me.setPosition(0, 0);
me.fitContainer();
me.fireEvent('maximize', me);
}
return me;
}

Elfayer
24 Jul 2012, 7:39 AM
I'm doing a Web Desktop, and I want the window to be full screened just above the taskbar. That's why I'm changing the full screen of a window, so that it is not hiding the taskbar.

maximize: function () {
if (!this.maximized) {
var vpSize = (Ext.ComponentQuery.query('#Viewport')[0]).getSize();
var posTb = (Ext.ComponentQuery.query('taskbar')[0]).getPosition();
var winPos = this.getPosition();
var winSize = this.getSize();

this.expand(false);
if (!this.hasSavedRestore) {
this.restoreSize = this.getSize();
this.restorePos = this.getPosition(true);
}
if (this.maximizable) {
this.tools.maximize.hide();
this.tools.restore.show();
}
this.maximized = true;
this.el.disableShadow();
if (this.dd) {
this.dd.disable();
}
if (this.collapseTool) {
this.collapseTool.hide();
}
this.el.addCls(Ext.baseCSSPrefix + 'window-maximized');
this.container.addCls(Ext.baseCSSPrefix + 'window-maximized-ct');
this.syncMonitorWindowResize();
this.setPosition(0, 0);
this.setSize(vpSize.width, posTb[1]);
this.fireEvent('maximize', this);
}
}

RED : What I added/change.

It works perfectly, the only thing I don't understand is that the "restore" don't restore the position but only the size. (the window is restore in (0, 0) )
Whereas I only change

this.fitContainer();
BY

this.setSize(vpSize.width, posTb[1]);
and I lost the position... any idea?

WillBill
24 Jul 2012, 12:03 PM
Try adding a boolean. Not sure if it will help. Are you sure the values in posTb are the ones you want?





var posTb = (Ext.ComponentQuery.query('taskbar')[0]).getPosition(true);

Elfayer
24 Jul 2012, 11:47 PM
Hm I think the problem now comes from the restore function.
Here is what I have :
1. a simple window :
37450

2. I maximize it :
37451

I can see the taskbar, that's perfect. Until now, no problem.

3-1.But now it comes, two problems. If I reduce the window:
37452
Got that :
37453
The size is the good one, but the position has not been restored.

And the second one:

3-2. I minimize the window and by clicking on the taskbar button of the application I redisplays it :

37455

I lost the taskbar (the window is fit), the window is in front of the taskbar.

WillBill
25 Jul 2012, 12:36 AM
Well, one thing I noticed is that you removed the 'var me = this;' line and use 'this' directly.
I would suggest to change this back to it's original state, to be certain you're working with in the right scope.

Your first problem (window in the wrong position) I believe is due to you not passing a boolean with the
setPosition method.

Without the boolean this function returns the Page XY, instead of the element's left/top, which is what you need I believe.




var posTb = (Ext.ComponentQuery.query('taskbar')[0]).getPosition(

true

);




I think the above will resolve your second problem aswell.

Elfayer
25 Jul 2012, 12:46 AM
It didn't change anything, always the same problems.

WillBill
25 Jul 2012, 12:53 AM
You mean that with the original function, without any changes, you see the same behaviour?

Elfayer
25 Jul 2012, 12:56 AM
No I only changed : "var posTb = (Ext.ComponentQuery.query('taskbar')[0]).getPosition(true);"
And that didn't correct the problems.

WillBill
25 Jul 2012, 1:08 AM
You should really try to put back the 'var me = this;' part aswell...

A quick fix for your toolbar disappearing would be to do a setSize and subtract the height of your toolbar.

But really, I mean really, add the 'var me = this;' part to your code.
The panel you're resizing your window in has a position of 0/0, and a height of 100%. Your window initially has the correct measurements (before any saved values are restored), when you reduce your window again it uses the stored values and in your case sets it to 0/0. This is the position of the panel you're resizing your window in. Once you try to maximize it, it covers your taskbar. So it's height is, just as your panel, set to 100%.

So it seems you're saving the values of your panel and not your window.

Elfayer
25 Jul 2012, 1:33 AM
Why every body is changing the "this" to "me" ? I really don't understand that trick, that's just an equivalence, it's useless, or did I miss something?