PDA

View Full Version : [UNKNOWN]Seems to be a bug in the toolbar menu example...



jeffcrilly
2 Oct 2009, 6:48 PM
Check out the toolbar example on Firefox and IE. (I'm using FF3 and IE7).

http://www.extjs.com/deploy/dev/examples/menu/menus.html

The menu "separator" is different between the two browsers.

It looks incorrect on FF. Looks fine on IE7 (afaict.)

I thought this was my bug, until I noticed it in the ext-js example also.

(I suspect this is a known problem, however I could not find it discussed in the forums.)

thx

jeff

Animal
2 Oct 2009, 11:27 PM
I suggest that the following changes be made to make the "incised" look the result of just borders:



Ext.override(Ext.menu.Separator, {
onRender : function(li){
this.el = li.createChild({tag: 'span', cls: this.itemCls});
li.addClass("x-menu-sep-li");
Ext.menu.Separator.superclass.onRender.apply(this, arguments);
}
});


Styling should be the following (some of these may be removed because I had to override styles from ext-all.css to get the result) Obviously I have mixed structure and appearance here:



.x-menu li.x-menu-sep-li {
height: 0;
padding: 0;
border-width: 1px 0 1px 0;
border-style: solid;
border-top-color: #ddd;
border-bottom-color: #fff;
}

.x-menu li.x-menu-sep-li span.x-menu-sep {
display: none;
}

Animal
3 Oct 2009, 12:06 AM
Likewise, a background image could be eliminated by using a similar technique for the vertical separator:



Ext.override(Ext.menu.Menu, {
onRender : function(ct, position){
if(!ct){
ct = Ext.getBody();
}

var dh = {
id: this.getId(),
cls: 'x-menu ' + ((this.floating) ? 'x-menu-floating x-layer ' : '') + (this.cls || '') + (this.plain ? ' x-menu-plain' : '') + (this.showSeparator ? '' : ' x-menu-nosep'),
style: this.style,
cn: [
{cls: 'x-menu-vertical-sep'},
{tag: 'a', cls: 'x-menu-focus', href: '#', onclick: 'return false;', tabIndex: '-1'},
{tag: 'ul', cls: 'x-menu-list'}
]
};
if(this.floating){
this.el = new Ext.Layer({
shadow: this.shadow,
dh: dh,
constrain: false,
parentEl: ct,
zindex:15000
});
}else{
this.el = ct.createChild(dh);
}
Ext.menu.Menu.superclass.onRender.call(this, ct, position);

if(!this.keyNav){
this.keyNav = new Ext.menu.MenuNav(this);
}
// generic focus element
this.vertSep = this.el.child('div.x-menu-vertical-sep');
this.focusEl = this.el.child('a.x-menu-focus');
this.ul = this.el.child('ul.x-menu-list');
this.mon(this.ul, {
scope: this,
click: this.onClick,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut
});
if(this.enableScrolling){
this.mon(this.el, {
scope: this,
delegate: '.x-menu-scroller',
click: this.onScroll,
mouseover: this.deactivateActive
});
}
},

onResize: Ext.isIE ? function() {
this.vertSep.setHeight(this.getHeight());
} : Ext.emptyFn
});


Then



.x-menu {
position: relative;
}

.x-menu .x-menu-vertical-sep {
position: absolute;
top: 0;
left: 25px;
width: 0;
height: 100%;
z-index: -1;
border-width: 0 1px 0 1px;
border-style: solid;
border-left-color: #ddd;
border-right-color: #fff;
}

.x-menu-plain .x-menu-vertical-sep {
display: none;
}

.x-menu .x-menu-scroller {
background-color:#F0F0F0; <--- this needs adding anyway.
}

Animal
3 Oct 2009, 12:31 AM
Toolbar separators too. No image required:



.x-toolbar .xtb-sep {
background-image: none;
border-left: 1px solid #B3CAE9;
border-right: 1px solid #FFFFFF;
border-style: solid;
border-width: 0 1px;
height: 13px;
width: 0;
}

evant
5 Oct 2009, 3:51 PM
@OP

Care to post a screenshot? I'm not quite clear on what you're referring to.

Animal
5 Oct 2009, 9:12 PM
It's a very, very small visual difference, a one pixel horizontal line difference. If you put the two browsers side by side running the example you'll see it.