PDA

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



drunkmoose
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>\
</ul>"
},
{
xtype: 'panel',
id: 'loggedInMenu',
innerCls: 'cssmenu',
html: "<ul>\
<li id='listMenu' class='has-sub'><a href='#'><span>Eligibility list</span></a>\
<ul>\
<li><a href='#' id='viewContactListItem'><span>View/manage list</span></a></li>\
<li><a href='#' id='addContactItem'><span>Add employee</span></a></li>\
</ul>\
</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>\
</ul>"



}
]
});


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 ?

Thanks.

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


Ext.get('visitorMenu-innerCt').addCls('cssmenu');
Ext.get('loggedInMenu-innerCt').addCls('cssmenu');

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

mdnaveed42
9 Jun 2014, 11:44 PM
Hi,

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


(http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.AbstractPanel-cfg-bodyCls)Thanks,
Md Naveed
\m/

drunkmoose
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