1

私はCSSに関して本当に環境に配慮しています。実は、3冊くらい読んだ後も、その概念がよくわかりませんでした。ここで達成しようとしているのは、SenchaTouch2.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;
}

それでも、コードを実行すると、機能しません。それはいくつかの層に埋め込まれています。最初にカルーセルのあるパネル、次にアイテムはこのパネルを含むパネルです。したがって、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

これをcssのPanelBioクラスに追加してみてください。

overflow: hidden;

これで問題が解決しない場合は、要素に適用されているcssクラスを投稿に追加してください。

于 2012-10-31T01:48:38.280 に答える
1

ご存知のとおり、問題はSenchaTouchファイルの「構成」にあることが判明しました。それ以外の

cls: 'PanelBio',

私は使用しなければなりませんでした

baseCls: 'PanelBio',

残念ながら、その理由を実際に説明することはできませんが、SenchaがすべてのExt.Panelオブジェクトに対してデフォルトで生成するクラスをオーバーライドしているようです。

于 2012-10-31T18:24:10.900 に答える