PDA

View Full Version : [Ext Core] Ext.ux.FingerMenu



mankz
13 Jun 2009, 6:48 AM
New menu UX for Ext Core. Not sure what the usability department will say on this one... :).



Tested in FF3, IE6-8, Chrome 2, Opera 10, Safari 4
CSS is optimized for 32x32 icons. See example or source code documentation for usage.
MIT License
Live Example (http://mankz.com/code/FingerMenu/)



Version history

2009-07-02 v1.1 Code cleaning and refactoring. setSelectedIndex added





http://mankz.com/code/FingerMenu/menu.png

Suggestions/bugs/feedback welcome!

Example usage:



Ext.onReady(function(){
var menu = new Ext.ux.FingerMenu({
cls : 'menuExample',
selectedIndex : 0,
items : [
{
text : 'Lightbox',
iconCls : 'icon-lightbox'
}, {
text : 'Carousel',
iconCls : 'icon-carousel'
}, {
text : 'JSONP Flickr',
iconCls : 'icon-flickr'
}, {
text : 'Tabs',
iconCls : 'icon-tab'
}
]
});

menu.on('change', function(obj, index) {
switch(index) {
case 0:
// Do your thing here...
break;

case 1:
// Do your thing here...
break;

case 2:
// Do your thing here...
break;

case 3:
// Do your thing here...
break;
}
});
});



Source:


/*
The MIT License

Copyright (c) 2009 Mats Bryntse

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/

/**
* Ext.ux.FingerMenu
*
* @author Mats Bryntse
* @version 1.1
*
* This menu fires a 'change' event when an item is activated
*
*/

Ext.ns('Ext.ux');

Ext.ux.FingerMenu = Ext.extend(Ext.util.Observable, {
/*
* @cfg (array) array of menu config objects
* The menu is built for 32x32 icons, if you need different size icons
* you'll have to modify the CSS.
*
* Example object :
* {
* text : 'Menu item 1',
* iconCls : 'myIconClass',
* tooltip : 'This option is optional'
* }
*
*/
items : [],

/*
* @cfg (string) id of dom element to render the menu into
*/
renderTo : null,

/*
* @cfg (int) selected menu index, -1 for no selection
*/
selectedIndex : -1,

/*
* @cfg (int) the width of a collapsed menu item
*/
collapsedWidth : 40,

/*
* @cfg (int) the width of a menu item on hover
*/
hoverWidth : 43,

/*
* @cfg (int) the full width of a selected menu item
*/
itemWidth : 190,

/*
* @cfg (int) the height of a menu item
*/
itemHeight : 40,

/*
* @cfg (int) the amount of space between two menu items
*/
verticalPadding : 2,

/*
* @public (int) returns the currently selected item index
*/
getSelectedIndex : function() {
return this.selectedIndex;
},

/*
* @public selects the passed index
*/
setSelectedIndex : function(index) {
this.onItemClick(null, 'menuitem-' + index);
},

/*
* @private
*/
onItemClick : function(notUsed, t) {
var target = Ext.get(t);

if (!target.hasClass('fingermenu-show')){
var current = this.el.child('.fingermenu-show');
target.radioClass('fingermenu-show');

if (current) {
current.setX(this.collapsedWidth - this.itemWidth, {
duration : 0.3
});
}

target.setX(0, {
duration : 0.3,
callback : function() {
this.selectedIndex = parseInt(target.id.substring('menuitem-'.length), 10);
this.fireEvent.defer(10, this, ['change', this, this.selectedIndex]);
},
scope : this
});
}
},

/*
* @private
*/
onHover : function(e, t) {
var target = Ext.get(t);
target = target.is('div') ? target : target.up('div');
if (target.getX() === (this.collapsedWidth - this.itemWidth)){
target.setX(this.hoverWidth - this.itemWidth, {
duration : 0.1
});
}
},

/*
* @private
*/
onHoverLeave : function(e, t) {
var target = Ext.get(t);
target = target.is('div') ? target : target.up('div');

if (!target.hasClass('fingermenu-show')){
target.setX(this.collapsedWidth - this.itemWidth,{
duration : 0.2
});
}
},

/*
* @private
*/
constructor : function(config) {
if (!config || !config.items) throw 'Invalid arguments, see documentation';

Ext.apply(this, config);

var menuCfg = {
tag: 'div',
cls: 'fingermenu-panel ' + (config.cls || ''),
children : []
},
items = config.items,
item,
selected,
i;

this.addEvents('change');

for (i = 0; i < items.length; i++) {
item = items[i];
selected = (i === this.selectedIndex);

menuCfg.children.push({
id : 'menuitem-' + i,
cls : selected ? 'fingermenu-show' : '',
style : {
width : this.itemWidth + 'px',
position : 'absolute',
left : (selected ? 0 : (this.collapsedWidth - this.itemWidth)) + 'px',
top : (i*(this.itemHeight + this.verticalPadding)) + 'px'
},
tag: 'div',
title : item.tooltip || item.text,
children : [{
tag : 'span',
cls : item.iconCls ? ('fingermenu-icon ' + item.iconCls) : '',
html : item.text
}
]
});
}

this.el = Ext.DomHelper.append(this.renderTo || Ext.getBody(), menuCfg, true);

this.el.on('click', this.onItemClick, this, { delegate: 'div' });

var divs = this.el.select('div');
divs.on('mouseenter', this.onHover, this);
divs.on('mouseleave', this.onHoverLeave, this);

Ext.ux.FingerMenu.superclass.constructor.call(this);
}
});

syscobra
13 Jun 2009, 10:10 AM
Nice thanks for sharing...
How about a show on hover?
maybe not as far as when you click, i mean imagine just show the full menu on hover but the active one beeing with more width. Maybe you can change too the active item css as when you have a <a> html tag.
Just suggestions.

Edit: Forgot to say i tryed on IE8 and it works well so maybe it works good in IE6 too cause it doesn't have strange things on the code i thing.

mankz
13 Jun 2009, 11:08 AM
Good idea, original post & example page (http://mankz.com/code/fingermenu/) updated!

galdaka
13 Jun 2009, 12:34 PM
Not work in IE6, IE7 & IE8. ;)

Greeting,

demongloom
13 Jun 2009, 10:15 PM
Nice thing!
Can it been backported to 2.x version?

Animal
13 Jun 2009, 11:53 PM
There is no 2.0 Core.

mankz
14 Jun 2009, 1:16 AM
Not work in IE6, IE7 & IE8. ;)

Greeting,

Thanks for the heads up, should be working in IE7/8 now (tried it in IE8 with and without compatibility mode), still haven't tested it in IE6. Would rather bite my tongue really bad than try getting it working in IE6... :)

Original post and example page updated.

koko2589
14 Jun 2009, 2:49 AM
work very good on ext 2.2 to =D>=D>=D>=D>

mjlecomte
14 Jun 2009, 5:17 AM
Looks good.

Joe
14 Jun 2009, 11:01 AM
Great to see it working in IE now - cool.

I tested it in IE6 and it worked perfect, so you'll need another good reason to bite your tounge.

Nice to see a ExtJS Core based ux control geared towards content sites. Is this MIT open source - like ExtJS Core? If so, would you mind if I posted this in a SVN dedicated to ExtJS Core components for content sites? Are you interested in being part of such a project?

Thanks again for your active posts in regards to ExtJS Core.

koko2589
14 Jun 2009, 2:02 PM
hi
can we use this like Ext.ux.FingerMenu layout:'card'


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="panels.j"></script>


<link href="css/Ext.ux.FingerMenu.css" rel="stylesheet" type="text/css" />
<link href="css/example.css" rel="stylesheet" type="text/css" />



<script src="script/Ext.ux.FingerMenu.js" type="text/javascript"></script>


<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style type="text/css">
.x-panel-body p {
margin:10px;
}
#container {
margin:40px 0 0 195px;
}
</style>
<script type="text/javascript" >

Ext.onReady(function(){
var menu = new Ext.ux.FingerMenu({

selectedIndex : 0,
items : [
{
text:'show1',
iconCls : 'icon-lightbox', handler:function() {
p.getLayout().setActiveItem(0);
}
}, {
text:'show2',
iconCls : 'icon-carousel', handler:function() {
p.getLayout().setActiveItem(1);
}
}, {
text:'show3',
iconCls : 'icon-flickr', handler:function() {
p.getLayout().setActiveItem(2);
}
}, {
text : 'Lightbox',
iconCls : 'icon-lightbox'
}, {
text : 'Carousel',
iconCls : 'icon-carousel'
}, {
text : 'JSONP Flickr',
iconCls : 'icon-flickr'
}, { text : 'Tabs',
iconCls : 'icon-tab'
}
]
});


var p = new Ext.Panel({
renderTo: 'container',
collapsible:false,
height:400,

width:'100%', tbar:[{
text:'show1',
handler:function() {
p.getLayout().setActiveItem(0);
}
},{
text:'show2'
,handler:function() {
p.getLayout().setActiveItem(1); }


}, '->',
'-',{


text:'show3',iconCls:'left'
,handler:function() {
p.getLayout().setActiveItem(2);
}
}]
,layout:'card'
,activeItem:0
,layoutConfig:{deferredRender:true}
,defaults:{border:false}
,items:[{

html:'card1'
},{
html:'Card 2'
},{
html:'Card 3'
}]

});



});
</script>
</head>
<body><div id="container"><div/>
</body>
</html>

Rodolfo
14 Jun 2009, 2:28 PM
very nice :)

if help you.. the live example, not working on Safari version 4.0 (5530.17).

mankz
14 Jun 2009, 9:47 PM
Great to see it working in IE now - cool.

I tested it in IE6 and it worked perfect, so you'll need another good reason to bite your tounge.

Nice to see a ExtJS Core based ux control geared towards content sites. Is this MIT open source - like ExtJS Core? If so, would you mind if I posted this in a SVN dedicated to ExtJS Core components for content sites? Are you interested in being part of such a project?

Thanks again for your active posts in regards to ExtJS Core.

Glad it works in IE6, pretty surprising :).

It's MIT yes, just updated the original post. I might be interested in your project, what do you have in mind?

mankz
14 Jun 2009, 9:56 PM
very nice :)

if help you.. the live example, not working on Safari version 4.0 (5530.17).

Correct :(, just tried it. I'll look into it soon!

koko2589
15 Jun 2009, 12:59 AM
i try to use this with card bat

handler:function() {
p.getLayout().setActiveItem(0);
}

not work

:-/

see here i want to swish card wite finggermenu

http://itoto1.com/ext-2.0.2/examples/FingerMenu/finggermenucrad.html

what i need to do? tankyou


hi
can we use this like Ext.ux.FingerMenu layout:'card'


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="panels.j"></script>


<link href="css/Ext.ux.FingerMenu.css" rel="stylesheet" type="text/css" />
<link href="css/example.css" rel="stylesheet" type="text/css" />



<script src="script/Ext.ux.FingerMenu.js" type="text/javascript"></script>


<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style type="text/css">
.x-panel-body p {
margin:10px;
}
#container {
margin:40px 0 0 195px;
}
</style>
<script type="text/javascript" >

Ext.onReady(function(){
var menu = new Ext.ux.FingerMenu({

selectedIndex : 0,
items : [
{
text:'show1',
iconCls : 'icon-lightbox', handler:function() {
p.getLayout().setActiveItem(0);
}
}, {
text:'show2',
iconCls : 'icon-carousel', handler:function() {
p.getLayout().setActiveItem(1);
}
}, {
text:'show3',
iconCls : 'icon-flickr', handler:function() {
p.getLayout().setActiveItem(2);
}
}, {
text : 'Lightbox',
iconCls : 'icon-lightbox'
}, {
text : 'Carousel',
iconCls : 'icon-carousel'
}, {
text : 'JSONP Flickr',
iconCls : 'icon-flickr'
}, { text : 'Tabs',
iconCls : 'icon-tab'
}
]
});


var p = new Ext.Panel({
renderTo: 'container',
collapsible:false,
height:400,

width:'100%', tbar:[{
text:'show1',
handler:function() {
p.getLayout().setActiveItem(0);
}
},{
text:'show2'
,handler:function() {
p.getLayout().setActiveItem(1); }


}, '->',
'-',{


text:'show3',iconCls:'left'
,handler:function() {
p.getLayout().setActiveItem(2);
}
}]
,layout:'card'
,activeItem:0
,layoutConfig:{deferredRender:true}
,defaults:{border:false}
,items:[{

html:'card1'
},{
html:'Card 2'
},{
html:'Card 3'
}]

});



});
</script>
</head>
<body><div id="container"><div/>
</body>
</html>

Scorpie
15 Jun 2009, 1:03 AM
Nice work!

mankz
15 Jun 2009, 1:22 AM
i try to use this with card bat

handler:function() {
p.getLayout().setActiveItem(0);
}

not work

:-/


I chose not to use the handler approach, you use it like this:


Ext.onReady(function(){
var menu = new Ext.ux.FingerMenu({
cls : 'menuExample',
selectedIndex : 0,
items : [
{
text : 'Lightbox',
iconCls : 'icon-lightbox'
}, {
text : 'Carousel',
iconCls : 'icon-carousel'
}, {
text : 'JSONP Flickr',
iconCls : 'icon-flickr'
}, {
text : 'Tabs',
iconCls : 'icon-tab'
}
]
});

menu.on('change', function(obj, index) {
switch(index) {
case 0:
// Do your thing here...
break;

case 1:
// Do your thing here...
break;

case 2:
// Do your thing here...
break;

case 3:
// Do your thing here...
break;
}
});


});

koko2589
15 Jun 2009, 1:46 AM
tankou are king its work :))=D>=D>

demo here

http://itoto1.com/ext-2.0.2/examples/FingerMenu/finggermenucrad.html
menu.on('change', function(obj, index) {
switch(index) {
case 0:

break;

case 1:

p.getLayout().setActiveItem(2);;

break;

case 2:
// Do your thing here...
break;

case 3:
// Do your thing here...
break;
}
});

koko2589
15 Jun 2009, 3:42 AM
can we put Ext.ux.FingerMenu in panel?

layout:'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Footer',
region: 'south',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0'
},{
title: 'Navigation',
region:'east',//i want the Ext.ux.FingerMenu to be here how can we do that?
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 175,
minSize: 100,
maxSize: 250
},{
title: 'Main Content',
collapsible: false,
region:'center',
margins: '5 0 0 0'
}]

mankz
15 Jun 2009, 3:46 AM
Well...

1. It's not really designed for interaction with other Ext components (it's a Core "light widget")
2. It's designed as a left side menu, not suited for placement in any 'east' region.

Would be a considerable amount of work to get this done sorry...

koko2589
15 Jun 2009, 3:55 AM
Well...

1. It's not really designed for interaction with other Ext components (it's a Core "light widget")
2. It's designed as a left side menu, not suited for placement in any 'east' region.

Would be a considerable amount of work to get this done sorry...

yes i try all to do .maybe we need
xtype: 'fingermenu',

tankyou

mankz
15 Jun 2009, 4:39 AM
xtype is an ExtJS concept, not applicable for Core...

hello2008
15 Jun 2009, 7:03 AM
thanks for sharing, it's really nice! ;)

DigitalSkyline
15 Jun 2009, 8:12 AM
Just wanted to say good work... I did something like that but its just a single button, not a menu like yours. Cool!

Joe
16 Jun 2009, 10:01 AM
@mankz - Per our discussions / messages .. I have added your control to the google library.
Note: As a member you should be able to commit changes / new controls.

Still in baby stage .. but here is the SVN url.
http://code.google.com/p/extjscoremitux/
* for scripts are designed to help with basic content site creation using ExtJS Core.

If you think the name is too long / crazy .. I am open to a new name and can move over the code .. ideas / ok with that name?

I want to add a few more controls and then make a post related to this code library.

mankz
16 Jun 2009, 12:03 PM
Good work!

I'll keep it up to date with future changes!

manduks
22 Jun 2009, 2:16 PM
very good work looks nice, i can wait to use it in a page thanks for sharing

Joe
23 Jun 2009, 1:47 PM
@mankz (primarily) - here are some suggested updates (already complete in the code below)

1) Allow fingerWidth and fingerHeight to be specified
2) I wanted an option (for lazy ol' me) where I can specify iconWidth and hoverOffset .. and that computes the collapsedX and hoverX values ... but it still works the other way if you do not specify the iconWidth. If you specify iconWidth and no hoverOffset .. it just uses the same for hoverX.
3) Added selectByPos. Added to allow selecting a finger via a call (not just clicking it). This is so I can sync up with other components. Example, using the slider ux, I can set the finger - which sets the page and just link them up .. with these changes.
4) I needed to render this into a specific spot (not body). So I updated the code to allow for a renderTo in the config, which can be a dom, string id or Element.

Your thoughts?




/*
The MIT License

Copyright (c) 2009 Mats Bryntse

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/

/**
* Ext.ux.FingerMenu
*
* @author Mats Bryntse
* @version 1.0
*
* This menu fires a 'change' event when an item is activated
*
*/

Ext.ns('Ext.ux');

Ext.ux.FingerMenu = Ext.extend(Ext.util.Observable, {
/*
* @cfg (array) array of menu config objects
* The menu is built for 32x32 icons, if you need different size icons
* you'll have to modify the CSS.
*
* Example object :
* {
* text : 'Menu item 1',
* iconCls : 'myIconClass',
* tooltip : 'This option is optional'
* }
*
*/
items : [],

/*
* @cfg (int) selected menu index
*/
selectedIndex : 0,

/*
* @cfg (int) the X position of a selected menu item
*/
expandedX: 0,

/*
* @cfg (int) the X position of the collapsed menu items
*/
collapsedX : -150,

/*
* @cfg (int) the X position of a menu item on hover
*/
hoverX : -147,

//Joe - Added below
/*
* @cfg (int) the width of the menu item when expanded
*/
fingerWidth : 190,

//Joe - Added below
/*
* @cfg (int) the height of the menu item
*/
fingerHeight : 42,

/*
* @public (int) returns the currently selected item index
*/
getSelectedIndex : function() {
return this.selectedIndex;
},

/*
* @private
*/
onItemClick : function(e, t) {
this.selectEntry.call(this,t)
},
/*
* select entry by 0 based position
*/
selectByPos : function(thePos) {
this.selectEntry.call(this,Ext.getDom('menuitem-' + (thePos)) )
},
//Joe - Moved code to select entry below .. from the onItem Click and exposed to allow setting by position
/*
* @private
*/
selectEntry : function(entry) {

var target = entry.dom ? entry : Ext.get(entry);
var t = target.dom;

if (!target.hasClass('fingermenu-show')){
var current = this.el.child('.fingermenu-show');
target.radioClass('fingermenu-show');

current.setX(this.collapsedX, {
duration : 0.3
});

target.setX(this.expandedX, {
duration : 0.3,
callback : function() {
this.selectedIndex = parseInt(t.id.substring('menuitem-'.length), 10);
this.fireEvent.defer(10, this, ['change', this, this.selectedIndex, this.items[this.selectedIndex]]);
},
scope : this
});
}
},

/*
* @private
*/
onHover : function(e, t) {
var target = Ext.get(t);
target = target.is('div') ? target : target.up('div');
if (target.getX() === this.collapsedX){
target.setX(this.hoverX, {
duration : 0.1
});
}
},

/*
* @private
*/
onHoverLeave : function(e, t) {
var target = Ext.get(t);
target = target.is('div') ? target : target.up('div');

if (!target.hasClass('fingermenu-show')){
target.setX(this.collapsedX,{
duration : 0.2
});
}
},

/*
* @private
*/
constructor : function(config) {
if (!config || !config.items) throw 'Invalid arguments, see documentation';

//Joe - Preprocess Config to support icons width and optionally hoverOffset
if (config.iconWidth ){
config.collapsedX = 0 - ( (config.fingerWidth || this.fingerWidth ) - config.iconWidth )
config.hoverX = config.collapsedX + (config.hoverOffset || 0)
}
Ext.apply(this, config);

var tabCfg = {
tag: 'div',
cls: 'fingermenu-panel ' + (config.cls || ''),
children : []
},
items = config.items,
item,
selected,
i;


this.addEvents('change');

for (i = 0; i < items.length; i++) {
item = items[i];
selected = (i === this.selectedIndex);

tabCfg.children.push({
id : 'menuitem-' + i,
cls : selected ? 'fingermenu-show' : '',
style : {
width : this.fingerWidth + 'px',
position : 'absolute',
left : (selected ? this.expandedX : this.collapsedX) + 'px',
top : (i*this.fingerHeight) + 'px'
},
tag: 'div', children : [{
tag : 'span',
cls : item.iconCls ? ('fingermenu-icon ' + item.iconCls) : '',
html : item.text,
title : item.tooltip || item.text
}
]
});
}
//Joe - Added config.renderTo || ... below for more options
this.el = Ext.DomHelper.append(config.renderTo || Ext.getBody(), tabCfg, true);

this.el.on('click', this.onItemClick, this, { delegate: 'div' });

var divs = this.el.select('div');
divs.on('mouseenter', this.onHover, this);
divs.on('mouseleave', this.onHoverLeave, this);

Ext.ux.FingerMenu.superclass.constructor.call(this);
}
});

mankz
23 Jun 2009, 10:06 PM
Looks ok, I'll clean it up and release v1.1 once I get some free time. Going for a vacation tomorrow...

Btw, what's up with:


this.selectEntry.call(this,t)


Why not just do:


this.selectEntry(t)


Thanks for helping out :)

Joe
24 Jun 2009, 5:04 AM
I was having scope issues and changed that but can't recreate any issues when flipped back, so both those calls can be changed as you suspected.



/*
* @private
*/
onItemClick : function(e, t) {
//this.selectEntry.call(this,t)
this.selectEntry(t)
},
/*
* select entry by 0 based position
*/
selectByPos : function(thePos) {
//this.selectEntry.call(this,Ext.getDom('menuitem-' + (thePos)) )
this.selectEntry(Ext.getDom('menuitem-' + (thePos)) )
},

mankz
2 Jul 2009, 2:26 AM
very nice :)

if help you.. the live example, not working on Safari version 4.0 (5530.17).

Live example (http://mankz.com/code/FingerMenu/) updated, now works in Safari too. :)

mankz
2 Jul 2009, 8:08 AM
@mankz (primarily) - here are some suggested updates (already complete in the code below)

1) Allow fingerWidth and fingerHeight to be specified
2) I wanted an option (for lazy ol' me) where I can specify iconWidth and hoverOffset .. and that computes the collapsedX and hoverX values ... but it still works the other way if you do not specify the iconWidth. If you specify iconWidth and no hoverOffset .. it just uses the same for hoverX.
3) Added selectByPos. Added to allow selecting a finger via a call (not just clicking it). This is so I can sync up with other components. Example, using the slider ux, I can set the finger - which sets the page and just link them up .. with these changes.
4) I needed to render this into a specific spot (not body). So I updated the code to allow for a renderTo in the config, which can be a dom, string id or Element.

Your thoughts?


Implemented your stuff and refactored some things too. Original post and example site updated. Thanks for the suggestions!

koko2589
24 May 2010, 12:07 AM
window.open not workink on google crome can you help me?tankyou

my demo
http://www.itoto2.com/test2/index.html

window.open not workink on google crome can you help me?tankyou


case 2:window.open('http://extjs.net/','_blank');







http://www.itoto2.com/test2/index.html

mankz
24 May 2010, 12:10 AM
Already sent you PM, read here for more info:

http://www.google.com/support/chrome/bin/answer.py?hl=en&answer=95472