I have a component define by itemid how I can get it in controller

Question

im new in sencha . i always use id to define my component . but now i want to change it to itemid . and i found the Ext.getcmp('id'), is not work . and when i use Ext.componentquery.query('itemid') ,the console in chrome said Ext.componentquery is not a function. what can i do?

my view code:

Ext.define('ylp2p.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
    'Ext.TitleBar',
    'Ext.carousel.Carousel',
    'ylp2p.store.datainterests',      
    'Ext.Label',
    'Ext.List'
],
config: {
    fullscreen: true,
    tabBarPosition: 'bottom',
    scrollable: 'vertical',

    items: [
        {
            title: '首页',
            iconCls: 'home',

            styleHtmlContent: true,
            //true to automatically style the HTML inside the content target of this component (body for panels).
            scrollable: true,
            layout: 'card',
            items:  [
            {
                docked: 'top',
                xtype: 'titlebar',
                title: 'ylp2p'
            },
            {
                xtype: 'container',
                layout: 'vbox',
                items:[
                    {
                        xtype: 'label',
                        itemId: 'datalabel',---------this component is what i want
                        height: 50,
                        store: 'datainterests',
                        tpl: '金额：{data},利息：{earn}',
                    }//end label
                ]
            }
            ]//end items
        }
    ]
},//end config

//end listeners
});

my controller code :

Ext.define('ylp2p.controller.viewdata',{
extend: 'Ext.app.Controller',

launch: function(){
    console.log('hello ! here is controller launch function');
    var storeId = Ext.create('ylp2p.store.datainterests');
    storeId.load({
        callback: function(records, operation, success){
            Ext.each(records, function(record) {               
                Ext.ComponentQuery.query("main > datalabel").setData({----it cant work . why?
                    data : record.get('data'),
                    earn : record.get('earn')
                });
            });
        }
    });
}
});

the console error said:

Uncaught TypeError: Ext.ComponentQuery.query(...).setData is not a function

Answer 1

i got it

var label  = Ext.ComponentQuery.query('main #datalabel')[0];
label.setData({
  data : record.get('data'),
  earn : record.get('earn')
});

Answer 2

I found Sencha's own code to use menu.down('#groupMenuItem') to access itemId:'groupMenuItem' . So you should be fine using:

Ext.ComponentQuery.query('#itemid')

Answer 3

Use this.

var label  = Ext.ComponentQuery.query('main #datalabel');  -- check on console label should not undefined
label.tpl.updateData -- you will find methods with tpl