Ext Jsはボタン要素の上にテキストを表示します

Question

ボタンの上にテキストを揃えなければならないプログレスバーを開発しようとしています。我々は異なるレイアウトを使用しようとしましたが、それは来ていません。可能であれば、CSSを使用してその方法を提案する人もいます。例をここに添付してください。

Answer 1

CSSはあなたの問題を解決する必要があり、これは少しハードコードされていると一般的なソリューションとして機能しませんが、あなたはここから起動することができます。

まずはプログレスバーでパネルを作成してみましょうそしてそれらの間のボタン：

Ext.create('Ext.panel.Panel', { 
    renderTo: document.body, 
    height: 100, 
    layout: { 
     type: 'hbox', 
     align: 'middle' 
    }, 
    defaults: { 
     margin: 2 
    }, 
    items: [{ 
     xtype: 'progressbar', 
     style: { 
      borderRadius: '5px' 
     }, 
     height: 10, 
     width: 200, 
     text: ' ', 
     value: 1 
    }, { 
     xtype: 'container', 
     cls: 'btnWrapper', 
     items: [{ 
      xtype: 'button', 
      height: 30, 
      cls: 'fa fa-check', 
      style: { 
       color: 'white' 
      } 
     }] 
    }, { 
     xtype: 'progressbar', 
     style: { 
      borderRadius: '5px' 
     }, 
     height: 10, 
     text: ' ', 
     width: 200 
    }] 
}); 

そして、ここでは残りの世話をするためのCSSです：

<style> 
    .btnWrapper:before { 
     content: 'BASICS'; 
     font-weight: bold; 
     position: absolute; 
     top: -20px; 
     left: -10px; 
     width: 100%; 
     color: orange; 
     text-align: center; 
    } 
    .btnWrapper .x-btn { 
     border-radius: 30px; 
    } 
</style> 

Fiddle：https://fiddle.sencha.com/#view/editor&fiddle/21n5