cls for panel

[bhomass]

I want to use css to set style for a <table> which is generated by Ext.Panel.

var SalesAttributesPanel = new Ext.Panel( {
	applyTo : 'SalesAttributes',
	border: false,
   labelAlign: 'right',
	bodyStyle:'padding:5px 5px 0',
	layout : 'table',
	layoutConfig: {
    columns: 6
	},
	autoWidth : true,
	autoHeight : true,
	defaults : {
	border: false,
	bodyStyle:'padding:5px'
	},
	plain : true,
	cls:'SalesAttributesPanel',
	items : SalesAttributesDm
})

the generated page came out as

<div id="SalesAttributes" class="t2 x-panel SalesAttributesPanel x-panel-noborder" cellspacing="1" border="0" cellpadding="4" width="98%" style="width: auto;">
<div id="ext-gen62" class="x-panel-bwrap">
<div id="ext-gen63" class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-table-layout-ct" style="padding: 5px 5px 0pt; width: auto; height: auto;">
<table class="x-table-layout" cellspacing="0">
<tbody>
<tr>
<td id="ext-gen64" class="x-table-layout-cell">
<div id="ext-comp-1021" class="x-panel x-panel-noborder">
<div id="ext-gen65" class="x-panel-bwrap">
<div id="ext-gen66" class="x-panel-body x-panel-body-noheader x-panel-body-noborder" style="padding: 5px;">Client</div>
</div>
</div>
</td>
<td id="ext-gen67" class="x-table-layout-cell">
</td>
<td id="ext-gen70" class="x-table-layout-cell">
</td>
<td id="ext-gen73" class="x-table-layout-cell" colspan="3">
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>

I don't see the specified css class of SalesAttributesPanel anywhere. therefore, I can not apply css to the generated table.

the table I want to style has the auto generated class of x-table-layout. I do not want to apply css to that, since there maybe other tables with the same generated id. and I don't know if that class will be consistently generated.

isn't the idea of using cls to attach it to the output html, so you can map to css spec? Do I misunderstand how cls is to be applied?

[tryanDLS]

Looks like it there to me.

<div id="SalesAttributes" class="t2 x-panel SalesAttributesPanel x-panel-noborder"

You might also experiment with putting it on ctCls. You can also add classes directly to the panel body via addClass.

[bhomass]

I see, it is there, but in the container div, not applied to the table. and therefore, what I applied to the descendent of SalesAttributesPanel gets overridden by the css settings of x-table-layout.

ctCls has the same effect, it puts SalesAttributesPanel on the div container of the table. the table still has class=x-table-layout, which overrides the background I want to apply.

addClass('SalesAttributesPanel') had no visible effect any where.

just how is cls meant to work? as is, I am not able to control the look of any particular panel. unless I settle for having all my panels look alike.

[tryanDLS]

The classes are added to specific elements in the hierarchy as you have seen. If you want to affect the CSS in other ways, you can add classes to other Elements, using DomQuery, Ext.select, etc to find them. You should also be able to add overrides to specific classes in the panel

.SalesAttributesPanel .x-table-layout {font-weight:bold}

[bhomass]

yes, the last suggestion worked.

I wish there is a way to identify an element and have some css property propagate to its container as well.

[tryanDLS]

yes, the last suggestion worked.

I wish there is a way to identify an element and have some css property propagate to its container as well.

This can be done via DomQuery selection. Look at Element.up(). Searching should find you some examples.