PDA

View Full Version : x-box baseCls rounded box includes baseCls in sub elements class names



aoza
9 Jan 2011, 7:51 PM
x-box baseCls rounded box includes baseCls in sub elements class names, but there are no css styles defined for the generated sub elements.

Example:

new Ext.Panel({
renderTo: 'qaIntroCt',
frame : true,
width : 250,
height: 250,
baseCls: 'x-box-blue',
html: 'test',
contentEl: 'qaContentCt'
});

Generates the following markup:
<div style="width: 250px;" class=" x-box-blue" id="ext-comp-1009"><div class="x-box-blue-tl"><div class="x-box-blue-tr"><div class="x-box-blue-tc"></div></div></div><div id="ext-gen25" class="x-box-blue-bwrap"><div class="x-box-blue-ml"><div class="x-box-blue-mr"><div id="ext-gen28" class="x-box-blue-mc"><div style="width: 250px; height: 250px;" id="ext-gen26" class="x-box-blue-body">test<div id="qaContentCt"></div></div></div></div></div><div id="ext-gen27" class="x-box-blue-bl x-panel-nofooter"><div class="x-box-blue-br"><div class="x-box-blue-bc"></div></div></div></div></div>

There is no css definitions for x-box-blue-*

As a workaround use the default "baseCls: x-box" in the panel and on afterrender remove the x-box class and add x-box-blue class.

Condor
10 Jan 2011, 12:33 AM
Not if you use:

baseCls: 'x-box',
cls: 'x-box-blue'