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> 

小提琴：https://fiddle.sencha.com/#view/editor&fiddle/21n5