Sencha Touch 2圓角面板：CSS newb

對於CSS，我確實是綠色的。事實上，即使閱讀了3本書之後，我也並沒有真正理解這些概念。我想在這裏實現的是創建一些Sencha Touch 2.0.1的圓角面板。我有一個Ext.Panel。我給它的「PanelBio」一類的名字是這樣的：Sencha Touch 2圓角面板：CSS newb

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>

任何人都可以解釋我怎麼可以這樣做，以使這項工作？

來源

2012-10-31 Patrice Cote

只是你知道，問題原來是在Sencha Touch文件的「配置」中。取而代之的

cls: 'PanelBio',

我不得不使用

baseCls: 'PanelBio',

不幸的是，我真的不能解釋爲什麼它是如此，但它似乎重寫煎茶默認爲所有Ext.Panel生成類對象。

來源

2012-10-31 18:24:10

你可以試試這個在CSS添加到您的PanelBio類：

overflow: hidden;

如果這沒有幫助，請添加應用到的元素到您的文章的CSS類，所以我們可以有一個看。

來源

2012-10-31 01:48:38

感謝您的回答。原來它確實與框架有關。 –

Sencha Touch 2圓角面板：CSS newb

回答

相關問題