How to find child component of css selector (this.down not working)?

this.down('.my-class') doesn't seem to find a child element with the cls config set to 'my-class'. Am I doing something wrong? Here is the class def:

Code:

Ext.define('Speakeasy.view.Card', {
extend: 'Ext.Container',
alias: 'widget.card',
   config: {
       baseCls: 'card',
       items: [
           {
               cls: 'front',
               items: [
                   { cls: 'color' },
                   { cls: 'mask' },
                   { cls: 'image' },
                   {
                       xtype: 'label',
                       cls: 'text-top',
                   },
                   {
                       xtype: 'label',
                       cls: 'text-bottom',
                   }
               ],
           },
       ],
   },
});

And here is where I'm creating the element and then trying to set the text of the two labels:

Code:

       var card = this.getTable().add({
           xtype: 'card',
           cls: cls,
       });


       card.down('.text-top').setHtml(upperText);
       card.down('.text-bottom').setHtml(lowerText);

The problem is that card.down('.text-top') is returning null. WTF?

FWIW, I would say that in general query selectors in Sencha Touch are confusing. The docs for the functions in question (select, query, up, down, ctl refs) usually just give a one-liner saying to pass a "css selector", but there is clearly a different notion of what a 'css selector' is than standard CSS because it doesn't always work. I also run into similar problems with controller refs.

Help?!? Can someone point me to a doc that actually explains when to use what kinds of selectors and where? It would be awesome to be able to trust controller refs and to find children without using id.

Thank you so much!

How to find child component of css selector (this.down not working)?