PDA

View Full Version : [1.0] IconMenu Plugin for Window/Panel



jsakalos
27 Mar 2008, 6:11 PM
Hi folks,

I was missing the functionality of Window or Panel icon we are used to from operating systems. Clicking on that usually opens menu with some window tools and dblclicking closes the window.

Here is plugin that does it for Ext.Window: http://iconmenu.extjs.eu

Enjoy!

garraS
27 Mar 2008, 7:52 PM
Nice idea! Great!

Thanks for share.

garraS

vahala
27 Mar 2008, 11:52 PM
http://iconmenu.extjs.eu can not be open.

mystix
28 Mar 2008, 12:23 AM
http://iconmenu.extjs.eu can not be open.
loads fine for me. it's probably experiencing a sudden load surge. just wait a little while and try again.

jerrybrown5
28 Mar 2008, 12:27 AM
Saki,
This is really sharp. It is definitely one of those how did I ever live life without it kind of plugin.

Cheers,
Jerry

galdaka
28 Mar 2008, 5:16 AM
Excellent work as usual!!

Thanks!

wm003
28 Mar 2008, 7:12 AM
Awesome stuff again from you saki! =P~=P~=P~

Thank you so much for sharing!

franklt69
30 Mar 2008, 7:11 AM
Saki I have many windows in the app, and I would like to override initComponent to get this functionality in all windows, but don't work maybe is trivial but to me don't work I am doing it:


Ext.override(Ext.Window, {
initComponent:function() {
Ext.apply(this, {
plugins:[new Ext.ux.IconMenu({qtip:'Click to Open Menu'})]
});
// call parent
debugger;
this.superclass.initComponent.apply(this, arguments); //error: this.superclass has no properties
},

regards
Frank

jsakalos
30 Mar 2008, 8:07 AM
You cannot call this.superclass. You need to call Ext.Window.superclass.initComponent.apply(this, arguments).

jsakalos
30 Mar 2008, 8:12 AM
Beware that this way you cannot configure plugins from outside. Better would be:



if(Ext.isArray(this.plugins)) {
this.plugins.push(new Ext.ux.IconMenu());
}
else if('object' === typeof this.plugins) {
this.plugins = [this.plugins, new Ext.ux.IconMenu()]
}
else {
this.plugins = [new Ext.ux.IconMenu()];
}

evant
30 Mar 2008, 2:50 PM
Very cool, any chance of this getting included in the base?

jsakalos
30 Mar 2008, 2:57 PM
Jack will decide eventually... ;)

jsakalos
31 Mar 2008, 11:52 AM
Hi all!

Beta2 (http://iconmenu.extjs.eu) is out.

Changes:
Better destroy routine, now it removes also menu shadow that is not removed by menu.destroy(). IconMenu should now cleanup everything.

jsakalos
9 Apr 2008, 9:48 AM
Hi all!

Stable version 1.0 (http://iconmenu.extjs.eu) is out.

Enjoy.

pjordan
10 Apr 2008, 9:31 PM
Hi

I converted to this plugin after using a custom mod that accomplished this. With IconMenu when using wide icons in the windows Title (not the menu itself), say 40px, the windows title does not move to accomodate, the title starts underneath the wide icon.

In the config I use:

iconCls:'sb-star-orders',
style:'width:52px;height:20px;left:0;top:1px;position:absolute;cursor:pointer',

I can cheat the title over using many   but then that ruins my taskbar's window buttons (  gets written to the screen).

In the image below, the windows title is actuall "Order Manager".

What am I missing in order to use wide icons in the window title and have the title:'text' show up nicely?

jsakalos
11 Apr 2008, 2:37 AM
Grab the devel version and tell me if it works.

pjordan
11 Apr 2008, 8:32 AM
Sorry for the stupid question, but what devel version? AFAICT the IconMenu 1.0 is the only code available on your website.

I am already using ext-all and ext-base for 3.0. Are you saying those changed, or to download all the Desktop example files from the latest build? If so, would that be the code in trunk/ ?

Thank you

Paul

jsakalos
11 Apr 2008, 9:04 AM
Refresh your browser (Ctrl+R) you're perhaps caching the old version of demo page,

pjordan
11 Apr 2008, 4:15 PM
Saki, it worked, but push the window title over way to far, even with a standard icon.

In your file, line #373

var padding = this.icon.getWidth() + 40 + 'px' + ' !important';

I think changing the 40 to something more like 4 works nicely.

Thank you once again Saki

Paul

jsakalos
11 Apr 2008, 4:46 PM
Yeah, 40 is "devel" value. Production value is 4.

pjordan
27 May 2008, 5:12 PM
I can confirm that the "any width" icon text positioning issue I mentioned above persists in Safari on Mac and as you already know, Safari on Windows.

Do you by chance know what the root issue is?

Best,

Paul

Guteman
30 Sep 2008, 8:47 AM
I would like to request a feature with this IconMenu plugin. I was planning on using this plugin and applying my own custom menu to the icon to make my app less toolbar dependent and cleaner looking. This would of worked fine, except my panel config has titleCollapse = true. So, everytime I click the icon, the panel will collapse or expand. Not good! Is there a config or something I can do to prevent the panel from collapsing?

If you dont understand what im saying I can put together some kind of test case if you need it.

Thanks,
Paul

jsakalos
30 Sep 2008, 10:40 AM
Oh yes. Click handler should swallow the click event. I'll take a look.

jsakalos
9 Feb 2009, 5:42 PM
I've tweaked the title text position if iconmenu is in Panel a bit - now it looks better. There is no visual change in Ext.Windows though.

Scorpie
10 Feb 2009, 2:56 AM
Awesome!

dbassett74
22 Sep 2009, 1:52 PM
Seems to be a problem when you click the Close item, but there is code in the window's beforeclose event which cancels the closing of the window, the IconMenu never reappears. Seems like it must be destroying itself on click of the Close item. Should only destroy itself when if the form actually closes.

jsakalos
22 Sep 2009, 2:21 PM
Thank you for notifying me. Do you already have a patch?

dbassett74
23 Sep 2009, 7:04 AM
No patch yet, but I'll try to work on one and post it. Also, another suggestion, in keeping with the standard windows behavior, would be to also invoke this menu on a right-click of the caption area.

dbassett74
23 Sep 2009, 7:24 AM
I think there is a bug somewhere. I seem to keep getting "el is undefined" in FireBug in the onDestroy function (line 277).

My patch is:



, onDestroy: function() {
if (this.menu) {
var el = this.menu.getEl();
if (!Ext.isEmpty(el)) {
if (el.shadow && el.shadow.el) {
el.shadow.el.remove();
}
this.menu.destroy();
el.remove();
this.menu = null;
}
}
} // eo function onDestroy


Seems to fix the problem. Is this a good way of handling it??

dbassett74
24 Sep 2009, 9:11 AM
Another slight bug is that when double-clicking on the icon, to close the window, it does not disappear right away. This comes into play when the window has a beforeclose listener and pops up a messagebox asking the user if they really want to close the window. The IconMenu continues to display, I think it should really disappear immediately.

dbassett74
24 Sep 2009, 9:38 AM
Here is my proposed patches to fix the two issues I brought up:

1) Hide menu on double-click
2) Only destroy menu on actual close of panel

Black is existing, Green is add, Red is remove



, closeHandler: function() {
if (this.panel.closable) {
var action = this.panel.closeAction;
if ('hide' !== action) {
this.onDestroy();
}
this.panel[action]();
}
} // eo function closeHandler

// install icon event handlers
this.icon.on({
scope: this
, dblclick: function() {
if (this.dblClickClose) {
this.hideMenu();
this.closeHandler();
}
}
, click: { scope: this, delay: 200, fn: function(e, t) {
if (this.menu && !this.menu.isVisible() && !this.ignoreNextClick) {
this.showMenu();
}
}
}
});

//install panel event handlers
this.panel.on({
scope: this
, close: function() {
this.onDestroy();
}
});

jsakalos
24 Sep 2009, 4:37 PM
Thanks. I've put it to my local files for some testing. Then I'll let you know.

fabito
23 Nov 2009, 7:26 AM
Hi,

I´m using the IconMenu plugin in a TreePanel for alternating between two different trees.
Since each tree has its own icon I needed to change the panel´s icon according to the selected menu option. In order to achieve that I tried to use the setIconClass method within the menu item´s handler.
It didn´t work properly. I noticed the plugin overrides/replaces the default setIconClass method:


/**
* Replaces Panel/Window setIconClass method
* @private
*/
, setIconClass: function(iconCls) {
this.icon.replaceClass(this.iconCls, iconCls);
} // eo function setIconClassThe problem is that the current iconCls is not updated, so I changed to this:


/**
* Replaces Panel/Window setIconClass method
* @private
*/
, setIconClass: function(iconCls) {
this.icon.replaceClass(this.iconCls, iconCls);
this.iconCls = iconCls;
} // eo function setIconClassDon´t know whether its a bug or not, but everything is working fine now!

Greets
Fábio

jsakalos
23 Nov 2009, 2:44 PM
Yes, that was a bug. Thank you for the fix.

Eric24
5 Dec 2009, 6:20 AM
@Saki: There's been a lot of little fixes make to IconMenu since it was released. Is there a "latest version" source available somewhere?

xiaofei
5 Dec 2009, 9:28 PM
Thanks for share

jsakalos
6 Dec 2009, 3:20 AM
Devel version at http://iconmenu.extjs.eu contains all fixes. I've tested it against Ext 2.x and Ext 3.x and it should work. If not, report bugs please.

brookd
6 Jan 2010, 11:48 AM
I had to update the closeHandler method because I was getting an error me.dom is undefined every time I tried to close the window.



closeHandler:function() {
if(this.panel.closable) {
var action = this.panel.closeAction;
if('hide' !== action) {
this.onDestroy();
}

this.panel[action].defer(100,this.panel)
}
}

jsakalos
7 Jan 2010, 3:14 AM
I've made some changes in the destroy cycle. Re-download it from the site please and try it out.

brookd
7 Jan 2010, 1:30 PM
Under devel or stable?

jsakalos
7 Jan 2010, 2:31 PM
Devel.

SimoAmi
26 Feb 2010, 11:33 AM
If multiple instances of this plugin are run in the same environment. Say in multiple panels, this line will cause style definitions to be created multiple times:


Ext.util.CSS.createStyleSheet('.x-im-icon{float:none!important;margin-left:0!important}');

Instead you can use:


if(!Ext.util.CSS.getRule(".x-im-icon")) {
Ext.util.CSS.createStyleSheet('.x-im-icon{float:none!important;margin-left:0!important}');
}


Your plugin code has inspired me. Thank you!

Simo

jsakalos
26 Feb 2010, 12:01 PM
Have you tested the above patch? If it works I'll incorporate it into the code - it's good one.

SimoAmi
26 Feb 2010, 12:10 PM
Have you tested the above patch? If it works I'll incorporate it into the code - it's good one.

Works well. Tested in FF.

jsakalos
26 Feb 2010, 12:11 PM
OK, thanks, putting it into the code.

Nigel
5 Jan 2011, 12:59 AM
Hi Saki
Happy New Year, and thanks for your efforts on this and some others of your great plug-ins.

I have recently noticed that my IconMenus were not getting destroyed correctly - specifically I noticed it having moved from v3.1 to v3.3.1, but it could be that this was a problem before and I hadn't noticed :)

With some console logging, I managed to track the problem and have come up with a fix, although I'm not sure I fully understand why the first bit was a problem:

1. The IconMenu onDestroy was not getting called at all - I modified the set-up of the destroy event on the panel to remove the delay, and it started working fine again:



panel.on({
scope:this
,render:this.onRender
,hide:this.hideMenu
,destroy:this.onDestroy
//,destroy:{scope:this, fn:this.onDestroy, delay:100}
});
2. Once onDestroy was getting called correctly, I realised that as the menu element had presumably already been destroyed, the code within the
if(el) { test was never getting called, and therefore
this.menu.destroy() was not getting called. I moved it outside of this test and now everything seems to be working fine.



,onDestroy:function() {
if(this.menu) {
var el = this.menu.getEl();
if(el) {
if(el.shadow && el.shadow.el) {
el.shadow.el.remove();
}
//this.menu.destroy();
el.remove();
}
this.menu.destroy();
this.menu = null;
}
} // eo function onDestroy
I'm still a bit new to working out everything that goes on in the destroy cycle - my evidence for this was that the Ext.menu.menu object was still listed in the Widgets window of the Illumination plugin for Firebug (a really useful tool!) - so if I opened a few windows then closed them, I had a string of Ext.menu.menu objects left behind, each of which still contained a reference to the original window in this.panel, so presumably they were still in memory as well. Now that I've made this change, I can open and close lots of windows and I end up with nothing left behind.

Tested only in FF so far.

Regards
Nigel