View Full Version : How to assign card layout's panel CSS style....

9 Jun 2014, 9:48 AM
I'm trying to assign a CSS class to the panels within a card layout and I find the DOM that ExtJS quite complicated.

Here's the view:

Ext.define('Customer_Portal_UI.view.NavigationMenu', {
extend: 'Ext.form.Panel',
alias: 'widget.navigationmenu',
region: 'west',
layout: 'card',
items: [
xtype: 'panel',
id: 'visitorMenu',
innerCls: 'cssmenu',
html: "<ul>\
<li><a href='#' id='loginMenuItem'><span>Login</span></a></li>\
xtype: 'panel',
id: 'loggedInMenu',
innerCls: 'cssmenu',
html: "<ul>\
<li id='listMenu' class='has-sub'><a href='#'><span>Eligibility list</span></a>\
<li><a href='#' id='viewContactListItem'><span>View/manage list</span></a></li>\
<li><a href='#' id='addContactItem'><span>Add employee</span></a></li>\
<li id='caseMenu'><a href='#' id='caseListItem'><span>Cases</span></a></li>\
<li id='docMenu' class='last' id='documentListItem'><a href='#'><span>Documents</span></a></li>\


This is not working. I've got my CSS file using ".cssmenu" as class name.

After inspecting the DOM, it seems I need to apply this CSS class to the DIV whose ID is, for example 'visitorMenu-innerCt'. As it is, this DIV doesn't have any class assigned to it...

Where can I do this ?


9 Jun 2014, 10:40 AM
I was able to add the class to those specific DIVs when the panel is rendering:


But a config way of doing it would be nice. :)

9 Jun 2014, 11:44 PM

Right way of doing it...added a fiddle for you.. Click here (https://fiddle.sencha.com/#fiddle/6h3) to check.
Added the below CSS:

.cssmenu {
background-color: orange;
color: white;
.cssmenu ul {
list-style: none;
.cssmenu a {
color: white;

For more info..bodyCls

Md Naveed

12 Jun 2014, 6:09 AM
Thanks for your reply. That still did not do it. I don't know if there's something I'm missing about my layout or CSS, but I still have to, through code, assign the CSS class to the specified DIV.

Using 4.2.1