PDA

View Full Version : highlighting the current menu with changing the background color



kamalakarreddy vancha
29 Jan 2014, 1:18 AM
Hi...
In my applicatio am applying the background color to the menu when i mouse over on that menu(Image2).
I want to apply(stay) the same background color for that menu when i clicked the particular menu item means
this color should stay upto i will click the next item.
My requirement to show the current opened menu with hilighiting menu with chnaging the
background color change.
here is my code...
<html>


<head>
<title>kamalakar</title>
<link rel='stylesheet' href='/pnc4.1.0/resources/extjs/resources/css/ext-all.css' />
<link rel='stylesheet' href='/pnc4.1.0/resources/css/custom_css_cmc.css' />
<script type='text/javascript' src='/pnc4.1.0/resources/extjs/ext-all-dev.js'></script>
<script type="text/javascript">
Ext.onReady(function () {
var myform = Ext.create('Ext.panel.Panel', {
width: 220,
height:200,
margin: '-1px 0px 0px 0px',
cls: 'menuPanelBgColor',
autoScroll: true,
defaults: {
bodyStyle: 'background:#d1d2d4; padding:0px 0px 0px 0px;'
},
layout: {
type: 'vbox',
animate: true
// "hideCollapseTool": false
},
items:[{
"xtype": "panel",
"cls": "menuPanel",
"width": 199,
"collapsed": true,
"title": "<a href='#'>INQUIRY</a>",
"iconCls": "inquiryIcon",
"listeners": {
"afterrender": function (panel) {
panel.header.el.on('click', function () {
if (panel.collapsed) {
panel.expand();
} else {
panel.collapse();
}
})
}
},
"items": [{
"xtype": "menu",
"floating": false,
"items": [{
"text": "CARGO"
}, {
"text": "EQUIPMENT"
}, {
"text": "INVENTORY"
}, {
"text": "HISTORY"
}, {
"text": "EIR"
}, ]
}]
}]
});
var win = Ext.create('Ext.window.Window', {
title: 'Compose message',
collapsible: true,
cls: 'my-panel',
closable:false,
width: 600,
height:500,
layout: 'column',
items: [myform]
});
win.show();
})
</script>
</head>


<body></body>


</html>




Here is css code...
.x-menu-item-active .x-menu-item-link {
background-color: #fffacd !important;
background-image: none;
}


Please suggest me.....

Thanks

Gary Schlosberg
30 Jan 2014, 9:09 AM
How about adding click listener on the menu and use addCls/removeCls to change the style?