поиск компонентов

js-extjs-Поиск компонентов.js

//http://lessgeneric.com/extjs-tutorials/finding-components-dom-elements-or-whatever/

{
   region: 'center',
   id: 'centerTabPanel',
   xtype: 'tabpanel',
   items:[{
     title: 'Tab 1',
     html: '<h2>Content appropriate for the current navigation.</h2>'
   }]
}
//Ext.ComponentManager.get(‘centerTabPanel’);

{
   region: 'center',
   itemId: 'centerTabPanel',
   xtype: 'tabpanel',
   items:[{
     title: 'Tab 1',
     html: '<h2>Content appropriate for the current navigation.</h2>'
   }]
}
//Ext.ComponentQuery.query(‘#centerTabPanel’);

{
   region: 'center',
   mySuperProp: 'superProp',
   xtype: 'tabpanel',
   items:[{
     title: 'Tab 1',
     html: '<h2>Content appropriate for the current navigation.</h2>'
   }]
}
//Ext.ComponentQuery.query(‘[mySuperProp=”superProp”]’);
//Ext.ComponentQuery.query(‘[xtype=”tabpanel”]’);
//Ext.ComponentQuery.query(‘[region=”center”]’);

{
   region: 'center',
   mySuperProp: 'superProp',
   xtype: 'tabpanel',
   items:[{
     title: 'Tab 1',
     html: '<h2>Content appropriate for the current navigation.</h2>',
     listeners: {
       afterrender: function(){
         console.log(this.up());
       }
      }
   }]
}

{
   region: 'center',
   mySuperProp: 'superProp',
   xtype: 'tabpanel',
   items:[{
     title: 'Tab 1',
     html: '<h2>Content appropriate for the current navigation.</h2>',
     listeners: {
       afterrender: function(){
         console.log(this.up('[mySuperProp="superProp"]'));
       }
      }
   }]
}

Ext.define('usertrack.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'usertrack.view.main.MainController',
        'usertrack.view.main.MainModel'
    ],

    xtype: 'app-main',
    
    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },

    items: [{
        xtype: 'panel',
        bind: {
            title: '{name}'
        },
        region: 'west',
        html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
        width: 250,
        split: true,
        tbar: [{
            text: 'Button',
            handler: 'onClickButton'
        }]
    },{
        region: 'center',
        id: 'centerTabPanel',
        mySuperProp: 'superProp',
        xtype: 'tabpanel',
        items:[{
            title: 'Tab 1',
            html: '<h2>Content appropriate for the current navigation.</h2>',
            listeners: {
                afterrender: function(){

                    console.log(this.up('[xtype="app-main"]'));
                }
            }
        }]
    }]
});