PDA

View Full Version : ext menu UI



damnos
19 May 2009, 9:23 AM
Hi guys,

Is there anyway I can make the vertical line in menu component to be wider? I tried to look at overriding the x.menu css but cant figure out how to make it work.

What I meant is to make the vertical line (higlighted by the red box) more to the right to accomodate longer text

http://img231.imageshack.us/img231/6571/menugdw.jpg

Thanks !

19 May 2009, 9:27 AM
I think that's a sprite dude

damnos
19 May 2009, 9:40 AM
I cant seem to find the css that controls the positioning of the image, help?

19 May 2009, 9:45 AM
.x-menu {
border-color:#718bb7;
background-color:#f0f0f0;
background-image:url(../images/default/menu/menu.gif);
}

.x-menu .x-menu-scroller {
width: 100%;
background-repeat:no-repeat;
background-position:center;
height:8px;
line-height: 8px;
cursor:pointer;
margin: 0;
padding: 0;
}


this is not the fix

Animal
19 May 2009, 9:45 AM
It's a background image 250px wide which is repeated down the div



.x-menu {
background:#F0F0F0 url(../images/default/menu/menu.gif) repeat-y scroll 0 0;
border:1px solid #718BB7;
padding:2px;
z-index:15000;
}


You can add a higher specificity rule which applies



{
background:#F0F0F0 none repeat scroll 0 0;
}

damnos
19 May 2009, 10:27 AM
Thanks for the reply.

However, I still cant override x-menu css for just one particular menu, because Ext.menu.Menu component doesnt take in "cls" argument (unlike panels, etc which take cls config and we can override css as we need to)

tryanDLS
19 May 2009, 11:13 AM
Can't you give the menu an ID and add a specific css override for that?



#mymenu .x-menu {...}

Animal
19 May 2009, 11:38 AM
OK, I see what you want. You want the incised line further right?



.x-menu.my-special-class {
background:#F0F0F0 url(../images/default/menu/menu.gif) repeat-y scroll 55px 0;
}

(Or however many pixels right you want to move it)

damnos
19 May 2009, 11:38 AM
The Ext.menu.Menu doesnt take id config.

Animal
19 May 2009, 11:39 AM
It does. It's a Container. Which is a Component.

Animal
19 May 2009, 11:40 AM
http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.menu.Menu

damnos
19 May 2009, 11:50 AM
The documentation on Ext.menu.Menu doesnt shown config option for id.

And when I tried and using devtoolbar to look at the <div> generated by the menu, it has an auto-generated id "ext-gen"

tryanDLS
19 May 2009, 11:55 AM
Menus in 3.0 were refactored to be Components, so they do take an ID as config entry. It is in the doc linked by Nige above.

damnos
19 May 2009, 12:14 PM
Is Ext 3.0 fully released already (if so, is there a changelog I can look at?)

The documentation link still says "rc1"

tryanDLS
19 May 2009, 12:19 PM
3.0 is still RC1.1 - there is no changelog yet.