Question

I’m really green regarding CSS. As a matter of fact, I didn’t really understand the concepts, even after reading like 3 books. What I’m trying to achieve here is create some rounded corner panels with Sencha Touch 2.0.1. I have a Ext.Panel. I give it a class name of “PanelBio” like this :

Ext.create('Ext.Panel', {
    id: 'panelBio02',
    styleHtmlContent: true,
    centered:true,
    cls: 'PanelBio',

    html: [
        '<h1>Lorem epsum.....</h1>'
    ].join("")
})

So far so good… Then, I had a class definition in SASS file :

.PanelBio {
    -webkit-border-radius: 3em !important;
    border-radius: 3em !important;
    background-color: #333333;
    opacity: 0.8;
}

Yet, when I run the code, it’s just not working. It is embedded in a couple of layers. First a panel with a Carousel, then an item is a panel that contains this panel. So, when I inspect the element in Chrome dev tools, I get something like this :

<div class="x-container x-panel PanelBio x-floating" id="panelBio02" style="z-index: 4 !important; ">        
    <div class="x-inner x-panel-inner" id="ext-element-10">
        <div class="x-innerhtml  x-html" id="ext-element-12">
            <h1>Lorem epsum.....</h1>
        </div>
    </div>
    <div class="x-anchor" style="display: none; " id="ext-element-11">
    </div>
</div>

Can anyone explain me how could I do to make this work ?

Answer 1

Just so you know, the problem turned out to be in the “config” of the Sencha Touch file. Instead of

cls: 'PanelBio',

I had to use

baseCls: 'PanelBio',

Unfortunately, I can’t really explain why it is so, but it seems to override the class that Sencha generate by default for all Ext.Panel objects.