1

我对 CSS 非常满意。事实上，我并没有真正理解这些概念，即使在阅读了 3 本书之后。我在这里想要实现的是使用 Sencha Touch 2.0.1 创建一些圆角面板。我有一个 Ext.Panel。我给它一个“PanelBio”的类名，如下所示：

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

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

到目前为止一切顺利......然后，我在 SASS 文件中有一个类定义：

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

然而，当我运行代码时，它只是不工作。它嵌入了几层。首先是一个带有 Carousel 的面板，然后一个项目是包含该面板的面板。因此，当我在 Chrome 开发工具中检查元素时，我会得到如下信息：

<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>

谁能解释一下我该怎么做才能完成这项工作？

4

2 回答 2

1

如您所知，问题出在 Sencha Touch 文件的“配置”中。代替

cls: 'PanelBio',

我不得不使用

baseCls: 'PanelBio',

不幸的是，我无法真正解释为什么会这样，但它似乎覆盖了 Sencha 默认为所有 Ext.Panel 对象生成的类。

于 2012-10-31T18:24:10.900 回答
1

您可以尝试将其添加到 css 中的 PanelBio 类中：

overflow: hidden;

如果这没有帮助，请将应用于元素的 css 类附加到您的帖子中，以便我们查看。

于 2012-10-31T01:48:38.280 回答