Sencha-Touch 2 进度条从组件类扩展，看不到第二个子项

问：

我正在制作一个进度条，并完成了基本功能，并想为其添加一些样式，但遇到了问题。我希望它看起来像这样：

我让栏工作并在完成后更改颜色，但我想在栏顶部添加百分比。我可以添加数字或条形图，但不能同时添加两者。

这是我的进度条.js

Ext.define('HcMobile.tux.ProgressBar',{        extend: 'Ext.Component',
    xtype: 'progressbar',


    template: [
            {
                    cls: Ext.baseCSSPrefix + 'meter',
                    reference: 'meter',
                    tag: 'div',
                    children: [
                            {
                                    reference: 'span',
                                    tag: 'span'
                            },
                            {
                                    reference: 'percentage',
                                    tag: 'div', //also tried this with a few other tags
                                    html: '0%',
                                    cls: 'x-percentage'
                            }          
                            ]               
            }

    ],


    initialize: function() {
            window.progress = this;    
            var self = this;
            self.span.addCls('x-progress-bar-active');
            self.updateProgress(0);
    },


    complete: function(){
            var self = this;
            self.span.setWidth('100%')
            self.span.setCls('x-progress-bar-complete');
    },


    updateProgress: function(percentage) {
            var self = this;
            if (percentage > 100){
                    self.complete();
            }
            else{
                    self.span.setWidth(percentage + '%');
            }
    }

});

这是我的scss

.x-meter {        @include border-radius(1.5em / 2);
    @include box-shadow(inset 0 -2px 6px rgba(0, 0, 0, 0.4), inset 0 2px 9px  rgba(255, 255, 255, 0.1));
    background: black;
    height: 2em;
    position: relative;
    width: 100%;      
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);


    span {
            @include box-shadow(inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4));
            @include transition(1s);
            display: block;
            height: 2em;
            position: relative;
            overflow: hidden;
            z-index: -1;
    }


    .x-percentage {
            position: relative;
            display: block;
            font-size: 2em;
            color: red;
            font-weight: bold;
            z-index: 10;
    }

}

我尝试了这条路线和addCls（'x-percentage'）。两者都表明该类位于元素上。

当我检查 DOM 时，我看到数字在进度条下方（页面下方，而不是 z-index 下方）。所以我认为这是下一步。在那之后，也许要确保酒吧通过数字。我已经为此安装了 z-index。我还可以通过不让它成为酒吧的子项之一来获得酒吧旁边的数字。

任何帮助将不胜感激。