Sencha-Touch 2 Progress Bar Extending from Component Class and not seeing second child

Question

I am making a progress bar and have finished the basic functionality and wanted to add some styling to it and am having issues. I want it to look like this:

I have the bar working and the color change on completion but I wanted to add the percentage on top of the bar. I am able to add the number or the bar but not both.

This is my progressbar.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 + '%');
            }
    }

});

And this is my 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;
    }

}

I tried both this route and addCls('x-percentage'). Both showed that the class was on the element.

When I inspect the DOM I see the number is below(lower on the page not underneath as in z-index) the progress bar. So this I am assuming is the next step. After that perhaps making sure the bar goes through the number. I already had z-index in there for this. I also am able to get the number next to the bar by not making it one of the children of the bar.

Any help would be appreciated.

Answer 1

Ok so I kept working on this.

It was a positioning thing.

I changed the second child to position absolute and top:0; All good now.

Thanks everyone.